<!DOCTYPE html><html><head><meta charset="utf-8"><title>uxcore.js - React UI Component Set</title><meta name="description" content="React UI Component Set"><meta name="google-site-verification" content="KFAGkw1GuB8rR3zO8O090v65MVhYI02Xl6B7-MoSFLk"><meta name="keywords" content="uxcore, react, component, react component"><link href="/static/favicon.ico" rel="icon" type="image/x-icon"><link rel="stylesheet" href="//alinw.alicdn.com/platform/common/s/1.1/global/global.css"><link rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/style/index.css"><link id="J_ThemeSiteStyle" rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/style/orange.css"><link rel="stylesheet" href="//g.alicdn.com/uxcore/site/static/github-gist.min.css"><script src="//g.alicdn.com/uxcore/site/static/modernizr.js"></script><script>
    (function () {
        if (window.addEventListener) {
            window.addEventListener("load", function () {
                var script = document.createElement("script");

                script.src = "/regSW.pwa.js?t=" + Date.now();
                script.async = true;
                script.type = "text/javascript";
                script.crossOrigin = "anonymous";

                document.head.insertBefore(script, document.head.firstChild);
            });
        }
    })();
</script><script>(function(W, D, M){
	if (M.localstorage) {
		var t = localStorage.getItem('theme');
		W.theme = 'orange';
		if (t !== 'blue' && t !== 'orange' && t !== 'green') {
			t = 'orange';
		}
		if (t && t !== W.theme) {
			W.theme = t;
			D.getElementById('J_ThemeSiteStyle').setAttribute('href', '//g.alicdn.com/uxcore/site/static/style/' + t + '.css');
		}
	}	
}(window, document, Modernizr));</script><!--[if lt IE 9]><script src="//alinw.alicdn.com/platform/c/??es5-shim/4.1.12/es5-shim.min.js,es5-shim/4.1.12/es5-sham.min.js,console-polyfill/0.2.1/index.min.js,respond.js/1.4.2/respond.min.js"></script><![endif]--><script src="//alinw.alicdn.com/platform/c/??jquery/1.11.3/dist/jquery.min.js,react/0.14.9/react-with-addons.min.js,react/0.14.9/react-dom.min.js"></script><script src="//g.alicdn.com/uxcore/site/static/setting.js"></script><script src="//g.alicdn.com/platform/c/??lodash/3.10.1/lodash.min.js"></script><script src="//g.alicdn.com/platform/c/rangy/1.3.0/rangy-core.min.js"></script><script src="//g.alicdn.com/platform/c/tinymce/4.3.12/tinymce.min.js"></script><script src="//g.alicdn.com/uxcore/site/static/uxcore.js"></script></head><body><nav id="J-head" class="site-nav"><a href="/"><img src="/static/uxcore.png" class="logo"></a><ul class="nav-list"><li data-id="start"><a href="/start/base/">开始使用</a></li><li data-id="css"><a href="/css/base/">样式</a></li><li data-id="components"><a href="/components/button/">组件</a></li><li data-id="scene"><a href="/scene/defaultPage/">场景</a></li><li data-id="undefined"><a href="/about/contact/">关于我们</a></li></ul><div id="J_ComponentsSearch" class="component-search"></div><div id="J_ComponentsList" class="component-list">{&quot;site/about/contact/index.md&quot;:{&quot;title&quot;:null,&quot;id&quot;:&quot;about-contact-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/about/contact/index.md&quot;,&quot;directory&quot;:&quot;about/contact&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:null,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;START&quot;,&quot;chinese&quot;:&quot;联系我们&quot;,&quot;filepath&quot;:&quot;site/about/contact/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;about/contact&quot;,&quot;id&quot;:&quot;about-contact-index&quot;,&quot;template&quot;:&quot;about&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#联系我们\&quot;&gt;联系我们&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#微信\&quot;&gt;微信&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#其他\&quot;&gt;其他&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/album/demo/api.md&quot;:{&quot;title&quot;:&quot;API 调用&quot;,&quot;id&quot;:&quot;components-album-demo-api&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/album/demo/api.md&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;filename&quot;:&quot;api&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;API 调用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 API 的方式，在其他组件中使用点击查看大图的功能&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/album/demo/api.md&quot;,&quot;filename&quot;:&quot;api&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;id&quot;:&quot;components-album-demo-api&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/album/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-album-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/album/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/album/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/album/demo&quot;,&quot;id&quot;:&quot;components-album-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/album/index.md&quot;:{&quot;title&quot;:&quot;Album&quot;,&quot;id&quot;:&quot;components-album-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/album/index.md&quot;,&quot;directory&quot;:&quot;components/album&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Album&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;相册&quot;,&quot;filepath&quot;:&quot;site/components/album/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/album&quot;,&quot;id&quot;:&quot;components-album-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#album-props\&quot;&gt;Album.Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#photo-props\&quot;&gt;Photo.Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#album-show-config\&quot;&gt;Album.show(config)&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/alert/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-alert-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认的提醒样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/closable.md&quot;:{&quot;title&quot;:&quot;可关闭&quot;,&quot;id&quot;:&quot;components-alert-demo-closable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/closable.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;closable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可关闭&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/closable.md&quot;,&quot;filename&quot;:&quot;closable&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-closable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/container.md&quot;:{&quot;title&quot;:&quot;带有外部容器&quot;,&quot;id&quot;:&quot;components-alert-demo-container&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/container.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;container&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带有外部容器&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/container.md&quot;,&quot;filename&quot;:&quot;container&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-container&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/link.md&quot;:{&quot;title&quot;:&quot;带链接&quot;,&quot;id&quot;:&quot;components-alert-demo-link&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/link.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带链接&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/link.md&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-link&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/demo/message.md&quot;:{&quot;title&quot;:&quot;带有描述性文字&quot;,&quot;id&quot;:&quot;components-alert-demo-message&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/alert/demo/message.md&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;filename&quot;:&quot;message&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;带有描述性文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/alert/demo/message.md&quot;,&quot;filename&quot;:&quot;message&quot;,&quot;directory&quot;:&quot;components/alert/demo&quot;,&quot;id&quot;:&quot;components-alert-demo-message&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/alert/index.md&quot;:{&quot;title&quot;:&quot;Alert&quot;,&quot;id&quot;:&quot;components-alert-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/alert/index.md&quot;,&quot;directory&quot;:&quot;components/alert&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Alert&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;警告提示&quot;,&quot;filepath&quot;:&quot;site/components/alert/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/alert&quot;,&quot;id&quot;:&quot;components-alert-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/animate/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-animate-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/animate/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认提供的动画样式，只有入场动画。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/animate/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;id&quot;:&quot;components-animate-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/animate/demo/custom.md&quot;:{&quot;title&quot;:&quot;定制动画&quot;,&quot;id&quot;:&quot;components-animate-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/animate/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制动画&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认提供的动画样式，只有入场动画。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/animate/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/animate/demo&quot;,&quot;id&quot;:&quot;components-animate-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/animate/index.md&quot;:{&quot;title&quot;:&quot;Animate&quot;,&quot;id&quot;:&quot;components-animate-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/animate/index.md&quot;,&quot;directory&quot;:&quot;components/animate&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Animate&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;动画&quot;,&quot;filepath&quot;:&quot;site/components/animate/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/animate&quot;,&quot;id&quot;:&quot;components-animate-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/badge/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-badge-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/numberplus.md&quot;:{&quot;title&quot;:&quot;数字增减&quot;,&quot;id&quot;:&quot;components-badge-demo-numberplus&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/numberplus.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;numberplus&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;数字增减&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/numberplus.md&quot;,&quot;filename&quot;:&quot;numberplus&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-numberplus&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/point.md&quot;:{&quot;title&quot;:&quot;小点&quot;,&quot;id&quot;:&quot;components-badge-demo-point&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/point.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;point&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小点&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/point.md&quot;,&quot;filename&quot;:&quot;point&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-point&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/show.md&quot;:{&quot;title&quot;:&quot;显示/隐藏&quot;,&quot;id&quot;:&quot;components-badge-demo-show&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/show.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示/隐藏&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/show.md&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-show&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/demo/text.md&quot;:{&quot;title&quot;:&quot;文字&quot;,&quot;id&quot;:&quot;components-badge-demo-text&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/badge/demo/text.md&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;filename&quot;:&quot;text&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/badge/demo/text.md&quot;,&quot;filename&quot;:&quot;text&quot;,&quot;directory&quot;:&quot;components/badge/demo&quot;,&quot;id&quot;:&quot;components-badge-demo-text&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/badge/index.md&quot;:{&quot;title&quot;:&quot;Badge&quot;,&quot;id&quot;:&quot;components-badge-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/badge/index.md&quot;,&quot;directory&quot;:&quot;components/badge&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Badge&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;chinese&quot;:&quot;徽标&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/badge/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/badge&quot;,&quot;id&quot;:&quot;components-badge-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/button/demo/countdown.md&quot;:{&quot;title&quot;:&quot;倒计时按钮&quot;,&quot;id&quot;:&quot;components-button-demo-countdown&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/countdown.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;countdown&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;倒计时按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;倒计时&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/countdown.md&quot;,&quot;filename&quot;:&quot;countdown&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-countdown&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/danger.md&quot;:{&quot;title&quot;:&quot;警示按钮&quot;,&quot;id&quot;:&quot;components-button-demo-danger&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/danger.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;danger&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;警示按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;用于页面内的影响较大的操作，一般配合二次确认使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/danger.md&quot;,&quot;filename&quot;:&quot;danger&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-danger&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/ghost.md&quot;:{&quot;title&quot;:&quot;幽灵按钮&quot;,&quot;id&quot;:&quot;components-button-demo-ghost&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/ghost.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;ghost&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;幽灵按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;背景变为透明，常用在有色背景上。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/ghost.md&quot;,&quot;filename&quot;:&quot;ghost&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-ghost&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/icon.md&quot;:{&quot;title&quot;:&quot;图标按钮&quot;,&quot;id&quot;:&quot;components-button-demo-icon&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/icon.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;icon&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图标按钮&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/icon.md&quot;,&quot;filename&quot;:&quot;icon&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-icon&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/loading.md&quot;:{&quot;title&quot;:&quot;加载态&quot;,&quot;id&quot;:&quot;components-button-demo-loading&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/loading.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;加载态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;加载的状态&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/loading.md&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-loading&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/size.md&quot;:{&quot;title&quot;:&quot;不同尺寸&quot;,&quot;id&quot;:&quot;components-button-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/size.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不同尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不同尺寸的按钮。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/status.md&quot;:{&quot;title&quot;:&quot;禁用状态&quot;,&quot;id&quot;:&quot;components-button-demo-status&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/status.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;status&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用状态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/status.md&quot;,&quot;filename&quot;:&quot;status&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-status&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/demo/type.md&quot;:{&quot;title&quot;:&quot;按钮类型&quot;,&quot;id&quot;:&quot;components-button-demo-type&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button/demo/type.md&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;filename&quot;:&quot;type&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;按钮类型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不同类型的按钮。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/button/demo/type.md&quot;,&quot;filename&quot;:&quot;type&quot;,&quot;directory&quot;:&quot;components/button/demo&quot;,&quot;id&quot;:&quot;components-button-demo-type&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button/index.md&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;id&quot;:&quot;components-button-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian &lt;macisi528@gmail.com&gt;&quot;},&quot;filepath&quot;:&quot;site/components/button/index.md&quot;,&quot;directory&quot;:&quot;components/button&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;按钮&quot;,&quot;filepath&quot;:&quot;site/components/button/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/button&quot;,&quot;id&quot;:&quot;components-button-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/button-group/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-button-group-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;传统意义上的按钮组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/demo/link.md&quot;:{&quot;title&quot;:&quot;分隔型按钮组（链接型）&quot;,&quot;id&quot;:&quot;components-button-group-demo-link&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/link.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分隔型按钮组（链接型）&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;按钮组中每个链接分隔存在，允许超过一定个数时折叠。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/link.md&quot;,&quot;filename&quot;:&quot;link&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-link&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/demo/separated.md&quot;:{&quot;title&quot;:&quot;分隔型按钮组&quot;,&quot;id&quot;:&quot;components-button-group-demo-separated&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/button-group/demo/separated.md&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;filename&quot;:&quot;separated&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分隔型按钮组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;按钮组中每个按钮分隔存在，允许超过一定个数时折叠。&lt;br&gt;表格的操作列使用的就是这种形式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/button-group/demo/separated.md&quot;,&quot;filename&quot;:&quot;separated&quot;,&quot;directory&quot;:&quot;components/button-group/demo&quot;,&quot;id&quot;:&quot;components-button-group-demo-separated&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/button-group/index.md&quot;:{&quot;title&quot;:&quot;ButtonGroup&quot;,&quot;id&quot;:&quot;components-button-group-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/button-group/index.md&quot;,&quot;directory&quot;:&quot;components/button-group&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;ButtonGroup&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;按钮组&quot;,&quot;filepath&quot;:&quot;site/components/button-group/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/button-group&quot;,&quot;id&quot;:&quot;components-button-group-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/calendar/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-calendar-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/calendarfull.md&quot;:{&quot;title&quot;:&quot;大日历&quot;,&quot;id&quot;:&quot;components-calendar-demo-calendarfull&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/calendarfull.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;calendarfull&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大日历&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;大日历日期选择,跨日程，提供Calendar.util.generateScheduleContent方法，返回具体日程的相关信息。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/calendarfull.md&quot;,&quot;filename&quot;:&quot;calendarfull&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-calendarfull&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/cascade.md&quot;:{&quot;title&quot;:&quot;级联&quot;,&quot;id&quot;:&quot;components-calendar-demo-cascade&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/cascade.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;cascade&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;级联&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;我们推荐在只有年月日级联选择的情况下使用此面板，对于有时间选择的情况使用 Form 中提供的双输入框级联方式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/cascade.md&quot;,&quot;filename&quot;:&quot;cascade&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-cascade&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/dateinput.md&quot;:{&quot;title&quot;:&quot;显示输入&quot;,&quot;id&quot;:&quot;components-calendar-demo-dateinput&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/dateinput.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;dateinput&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示输入&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以在输入框中直接修改时间。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/dateinput.md&quot;,&quot;filename&quot;:&quot;dateinput&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-dateinput&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/formatter.md&quot;:{&quot;title&quot;:&quot;日期格式&quot;,&quot;id&quot;:&quot;components-calendar-demo-formatter&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/formatter.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;formatter&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;日期格式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;使用 &lt;code&gt;format&lt;/code&gt; 属性，可以自定义你需要的日期显示格式，如 &lt;code&gt;yyyy/MM/dd&lt;/code&gt;。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/formatter.md&quot;,&quot;filename&quot;:&quot;formatter&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-formatter&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/miniweek.md&quot;:{&quot;title&quot;:&quot;MiniWeek&quot;,&quot;id&quot;:&quot;components-calendar-demo-miniweek&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/miniweek.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;miniweek&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;MiniWeek&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;10&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/miniweek.md&quot;,&quot;filename&quot;:&quot;miniweek&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-miniweek&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/month.md&quot;:{&quot;title&quot;:&quot;月份面板&quot;,&quot;id&quot;:&quot;components-calendar-demo-month&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/month.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;month&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;月份面板&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;直接显示月份面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/month.md&quot;,&quot;filename&quot;:&quot;month&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-month&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/quickrange.md&quot;:{&quot;title&quot;:&quot;快速区间选择&quot;,&quot;id&quot;:&quot;components-calendar-demo-quickrange&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/quickrange.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;quickrange&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;快速区间选择&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/quickrange.md&quot;,&quot;filename&quot;:&quot;quickrange&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-quickrange&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/range.md&quot;:{&quot;title&quot;:&quot;不可选区间&quot;,&quot;id&quot;:&quot;components-calendar-demo-range&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/range.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;range&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不可选区间&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;设置 &lt;code&gt;disabledDate&lt;/code&gt; 方法，来确定不可选时段。&lt;/p&gt;\n&lt;p&gt;如上例：不可选择今天之后的日期。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/range.md&quot;,&quot;filename&quot;:&quot;range&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-range&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/schedule.md&quot;:{&quot;title&quot;:&quot;显示日期和日程&quot;,&quot;id&quot;:&quot;components-calendar-demo-schedule&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/schedule.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;schedule&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示日期和日程&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Calendar 通过开放 contentRender 参数来完成日期渲染上的定制，并提供了一个默认的渲染函数 Calendar.util.generateContentRender(code) 来完成通用定制。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/schedule.md&quot;,&quot;filename&quot;:&quot;schedule&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-schedule&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-calendar-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/size.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/time.md&quot;:{&quot;title&quot;:&quot;时间选择&quot;,&quot;id&quot;:&quot;components-calendar-demo-time&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/time.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;time&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;时间选择&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;准确到秒的时间选择面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/time.md&quot;,&quot;filename&quot;:&quot;time&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-time&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/demo/year.md&quot;:{&quot;title&quot;:&quot;年份面板&quot;,&quot;id&quot;:&quot;components-calendar-demo-year&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/calendar/demo/year.md&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;filename&quot;:&quot;year&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;年份面板&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;直接显示年份面板。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/calendar/demo/year.md&quot;,&quot;filename&quot;:&quot;year&quot;,&quot;directory&quot;:&quot;components/calendar/demo&quot;,&quot;id&quot;:&quot;components-calendar-demo-year&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/calendar/index.md&quot;:{&quot;title&quot;:&quot;Calendar&quot;,&quot;id&quot;:&quot;components-calendar-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/calendar/index.md&quot;,&quot;directory&quot;:&quot;components/calendar&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Calendar&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;日期选择框&quot;,&quot;order&quot;:&quot;0&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/calendar/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/calendar&quot;,&quot;id&quot;:&quot;components-calendar-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#attention\&quot;&gt;Attention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#共通-props\&quot;&gt;共通 Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#monthcalendar-props\&quot;&gt;MonthCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#yearcalendar-props\&quot;&gt;YearCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#rangecalendar-props\&quot;&gt;RangeCalendar Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#calendarfull-props\&quot;&gt;CalendarFull props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#\bminiweek-props\&quot;&gt;\bMiniWeek props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/card/demo/advanced.md&quot;:{&quot;title&quot;:&quot;高级使用&quot;,&quot;id&quot;:&quot;components-card-demo-advanced&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/card/demo/advanced.md&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;高级使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/card/demo/advanced.md&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;id&quot;:&quot;components-card-demo-advanced&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/card/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-card-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/card/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/card/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/card/demo&quot;,&quot;id&quot;:&quot;components-card-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/card/index.md&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;id&quot;:&quot;components-card-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/card/index.md&quot;,&quot;directory&quot;:&quot;components/card&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;卡片&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/card/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/card&quot;,&quot;id&quot;:&quot;components-card-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/carousel/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-carousel-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/fade.md&quot;:{&quot;title&quot;:&quot;淡入淡出&quot;,&quot;id&quot;:&quot;components-carousel-demo-fade&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/fade.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;fade&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;淡入淡出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;fade 为 true 时，切换效果为淡入淡出&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/fade.md&quot;,&quot;filename&quot;:&quot;fade&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-fade&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/large-arrow.md&quot;:{&quot;title&quot;:&quot;大指示器&quot;,&quot;id&quot;:&quot;components-carousel-demo-large-arrow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/large-arrow.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;large-arrow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大指示器&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;当轮播较大时，使用大的指示器会有更好的视觉体验。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/large-arrow.md&quot;,&quot;filename&quot;:&quot;large-arrow&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-large-arrow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/multiple-group.md&quot;:{&quot;title&quot;:&quot;多模块轮播（成组）&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple-group.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;multiple-group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多模块轮播（成组）&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple-group.md&quot;,&quot;filename&quot;:&quot;multiple-group&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多模块轮播（单次）&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多模块轮播（单次）&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/carousel/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/carousel/demo&quot;,&quot;id&quot;:&quot;components-carousel-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/carousel/index.md&quot;:{&quot;title&quot;:&quot;Carousel&quot;,&quot;id&quot;:&quot;components-carousel-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/carousel/index.md&quot;,&quot;directory&quot;:&quot;components/carousel&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Carousel&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;轮播&quot;,&quot;filepath&quot;:&quot;site/components/carousel/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/carousel&quot;,&quot;id&quot;:&quot;components-carousel-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#更多细节详见-react-slick\&quot;&gt;更多细节详见 &lt;a href=\&quot;https://react-slick.neostack.com/\&quot;&gt;React Slick&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/cascade-multi-select/demo/async.md&quot;:{&quot;title&quot;:&quot;选项异步&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-async&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/async.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;async&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;选项异步&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/async.md&quot;,&quot;filename&quot;:&quot;async&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-async&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;:{&quot;title&quot;:&quot;禁选前两级&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled2level&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;disabled2level&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁选前两级&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;设置前两级 checkable: false&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/disabled2level.md&quot;,&quot;filename&quot;:&quot;disabled2level&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-disabled2level&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/modal.md&quot;:{&quot;title&quot;:&quot;以 Dialog 的形式弹出&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-modal&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/modal.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;modal&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;以 Dialog 的形式弹出&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/modal.md&quot;,&quot;filename&quot;:&quot;modal&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-modal&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/demo/panel.md&quot;:{&quot;title&quot;:&quot;直接使用面板&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-panel&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/panel.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;filename&quot;:&quot;panel&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;直接使用面板&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/demo/panel.md&quot;,&quot;filename&quot;:&quot;panel&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-demo-panel&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-multi-select/index.md&quot;:{&quot;title&quot;:&quot;CasMultiSelect&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/cascade-multi-select/index.md&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CasMultiSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;级联多选&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/cascade-multi-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/cascade-multi-select&quot;,&quot;id&quot;:&quot;components-cascade-multi-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props-config\&quot;&gt;Props.config&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props-options\&quot;&gt;Props.options&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props-value\&quot;&gt;Props.value&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#onselect\&quot;&gt;onSelect&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascademultipanel\&quot;&gt;CascadeMultiPanel&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascademultimodal\&quot;&gt;CascadeMultiModal&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#onok\&quot;&gt;onOk&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#使用方法\&quot;&gt;使用方法&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/cascade-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/clear.md&quot;:{&quot;title&quot;:&quot;允许清空&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-clear&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/clear.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;clear&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;允许清空&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/clear.md&quot;,&quot;filename&quot;:&quot;clear&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-clear&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/disable.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-disable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/disable.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/disable.md&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-disable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/cascade-select/demo/size.md&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/cascade-select/demo&quot;,&quot;id&quot;:&quot;components-cascade-select-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/cascade-select/index.md&quot;:{&quot;title&quot;:&quot;CascadeSelect&quot;,&quot;id&quot;:&quot;components-cascade-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;changming&quot;},&quot;filepath&quot;:&quot;site/components/cascade-select/index.md&quot;,&quot;directory&quot;:&quot;components/cascade-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CascadeSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;级联选择&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/cascade-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/cascade-select&quot;,&quot;id&quot;:&quot;components-cascade-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#demos\&quot;&gt;Demos&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props-options\&quot;&gt;props.options&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#当不指定-dropdown-宽度时，还可以使用css来定制dropdown宽度\&quot;&gt;当不指定 dropdown 宽度时，还可以使用css来定制dropdown宽度&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/checkbox-group/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-checkbox-group-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/checkbox-group/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/checkbox-group/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/checkbox-group/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/checkbox-group/demo&quot;,&quot;id&quot;:&quot;components-checkbox-group-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/checkbox-group/index.md&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;id&quot;:&quot;components-checkbox-group-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/checkbox-group/index.md&quot;,&quot;directory&quot;:&quot;components/checkbox-group&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;复选按钮组&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/checkbox-group/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/checkbox-group&quot;,&quot;id&quot;:&quot;components-checkbox-group-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxgroup\&quot;&gt;CheckboxGroup&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxitem\&quot;&gt;CheckboxItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/collapse/demo/accordion.md&quot;:{&quot;title&quot;:&quot;手风琴模式&quot;,&quot;id&quot;:&quot;components-collapse-demo-accordion&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/accordion.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;accordion&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;手风琴模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;手风琴，每次只打开一个tab。默认打开第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/accordion.md&quot;,&quot;filename&quot;:&quot;accordion&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-accordion&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-collapse-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以同时展开多个面板，这个例子默认展开了第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/demo/nest.md&quot;:{&quot;title&quot;:&quot;嵌套&quot;,&quot;id&quot;:&quot;components-collapse-demo-nest&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/collapse/demo/nest.md&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;filename&quot;:&quot;nest&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;嵌套&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;手风琴嵌套折叠面板&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/collapse/demo/nest.md&quot;,&quot;filename&quot;:&quot;nest&quot;,&quot;directory&quot;:&quot;components/collapse/demo&quot;,&quot;id&quot;:&quot;components-collapse-demo-nest&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/collapse/index.md&quot;:{&quot;title&quot;:&quot;Collapse&quot;,&quot;id&quot;:&quot;components-collapse-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vicent.bian&quot;},&quot;filepath&quot;:&quot;site/components/collapse/index.md&quot;,&quot;directory&quot;:&quot;components/collapse&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Collapse&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;折叠面板&quot;,&quot;order&quot;:&quot;15&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/collapse/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/collapse&quot;,&quot;id&quot;:&quot;components-collapse-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#collapse\&quot;&gt;Collapse&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#collapse-panel\&quot;&gt;Collapse.Panel&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/crumb/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-crumb-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/crumb/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/crumb/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/crumb/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/crumb/demo&quot;,&quot;id&quot;:&quot;components-crumb-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/crumb/index.md&quot;:{&quot;title&quot;:&quot;Crumb&quot;,&quot;id&quot;:&quot;components-crumb-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/crumb/index.md&quot;,&quot;directory&quot;:&quot;components/crumb&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Crumb&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;面包屑&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/crumb/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/crumb&quot;,&quot;id&quot;:&quot;components-crumb-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#crumb\&quot;&gt;Crumb&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#crumb-item\&quot;&gt;Crumb.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/dialog/demo/animate.md&quot;:{&quot;title&quot;:&quot;动画&quot;,&quot;id&quot;:&quot;components-dialog-demo-animate&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/animate.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;animate&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动画&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;CSS3 动画&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/animate.md&quot;,&quot;filename&quot;:&quot;animate&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-animate&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/asyncclose.md&quot;:{&quot;title&quot;:&quot;点击按钮触发&quot;,&quot;id&quot;:&quot;components-dialog-demo-asyncclose&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/asyncclose.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;asyncclose&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击按钮触发&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击确定2s后再关闭对话框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/asyncclose.md&quot;,&quot;filename&quot;:&quot;asyncclose&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-asyncclose&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-dialog-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/confirm.md&quot;:{&quot;title&quot;:&quot;自定义&quot;,&quot;id&quot;:&quot;components-dialog-demo-confirm&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/confirm.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;confirm&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义 &amp;amp; 垂直居中。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/confirm.md&quot;,&quot;filename&quot;:&quot;confirm&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-confirm&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/custom.md&quot;:{&quot;title&quot;:&quot;确认对话框&quot;,&quot;id&quot;:&quot;components-dialog-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;确认对话框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;确认对话框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/demo/info.md&quot;:{&quot;title&quot;:&quot;信息提示&quot;,&quot;id&quot;:&quot;components-dialog-demo-info&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dialog/demo/info.md&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;filename&quot;:&quot;info&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;信息提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;信息提示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/dialog/demo/info.md&quot;,&quot;filename&quot;:&quot;info&quot;,&quot;directory&quot;:&quot;components/dialog/demo&quot;,&quot;id&quot;:&quot;components-dialog-demo-info&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dialog/index.md&quot;:{&quot;title&quot;:&quot;Dialog&quot;,&quot;id&quot;:&quot;components-dialog-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/dialog/index.md&quot;,&quot;directory&quot;:&quot;components/dialog&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Dialog&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;对话框&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/dialog/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/dialog&quot;,&quot;id&quot;:&quot;components-dialog-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#dialog-xxx\&quot;&gt;Dialog.xxx()&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/drawer/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-drawer-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/drawer/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/drawer/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以同时展开多个面板，这个例子默认展开了第一个。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/drawer/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/drawer/demo&quot;,&quot;id&quot;:&quot;components-drawer-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/drawer/index.md&quot;:{&quot;title&quot;:&quot;Drawer&quot;,&quot;id&quot;:&quot;components-drawer-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;kewenlei&quot;},&quot;filepath&quot;:&quot;site/components/drawer/index.md&quot;,&quot;directory&quot;:&quot;components/drawer&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Drawer&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;抽屉&quot;,&quot;order&quot;:&quot;16&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/drawer/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/drawer&quot;,&quot;id&quot;:&quot;components-drawer-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/dropdown/demo/click.md&quot;:{&quot;title&quot;:&quot;点击触发&quot;,&quot;id&quot;:&quot;components-dropdown-demo-click&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/click.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击触发&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击触发&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/click.md&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-click&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/default.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-dropdown-demo-default&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/default.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;default&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/default.md&quot;,&quot;filename&quot;:&quot;default&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-default&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/events.md&quot;:{&quot;title&quot;:&quot;触发事件&quot;,&quot;id&quot;:&quot;components-dropdown-demo-events&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/events.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;events&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;触发事件&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;触发事件&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/events.md&quot;,&quot;filename&quot;:&quot;events&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-events&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/inline.md&quot;:{&quot;title&quot;:&quot;无边框&quot;,&quot;id&quot;:&quot;components-dropdown-demo-inline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/inline.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无边框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无边框。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/inline.md&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-inline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/demo/other.md&quot;:{&quot;title&quot;:&quot;其他元素&quot;,&quot;id&quot;:&quot;components-dropdown-demo-other&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/dropdown/demo/other.md&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;其他元素&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;分割线和不可用菜单项&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/demo/other.md&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;directory&quot;:&quot;components/dropdown/demo&quot;,&quot;id&quot;:&quot;components-dropdown-demo-other&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/dropdown/index.md&quot;:{&quot;title&quot;:&quot;Dropdown&quot;,&quot;id&quot;:&quot;components-dropdown-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/dropdown/index.md&quot;,&quot;directory&quot;:&quot;components/dropdown&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Dropdown&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;下拉菜单&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/dropdown/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/dropdown&quot;,&quot;id&quot;:&quot;components-dropdown-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/empty-data/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-empty-data-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/custom.md&quot;:{&quot;title&quot;:&quot;定制文案&quot;,&quot;id&quot;:&quot;components-empty-data-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制文案&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;定制文案。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/other.md&quot;:{&quot;title&quot;:&quot;其他类型&quot;,&quot;id&quot;:&quot;components-empty-data-demo-other&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/other.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;其他类型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;除通用缺省页外，我们还提供了其他 5 种类型的常用空图片&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/other.md&quot;,&quot;filename&quot;:&quot;other&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-other&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/demo/page.md&quot;:{&quot;title&quot;:&quot;页面使用&quot;,&quot;id&quot;:&quot;components-empty-data-demo-page&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/empty-data/demo/page.md&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;filename&quot;:&quot;page&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;页面使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在页面级的使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/demo/page.md&quot;,&quot;filename&quot;:&quot;page&quot;,&quot;directory&quot;:&quot;components/empty-data/demo&quot;,&quot;id&quot;:&quot;components-empty-data-demo-page&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/empty-data/index.md&quot;:{&quot;title&quot;:&quot;EmptyData&quot;,&quot;id&quot;:&quot;components-empty-data-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/empty-data/index.md&quot;,&quot;directory&quot;:&quot;components/empty-data&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;EmptyData&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;空数据&quot;,&quot;filepath&quot;:&quot;site/components/empty-data/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/empty-data&quot;,&quot;id&quot;:&quot;components-empty-data-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/float-nav/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-float-nav-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/float-nav/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/float-nav/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/float-nav/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/float-nav/demo&quot;,&quot;id&quot;:&quot;components-float-nav-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/float-nav/index.md&quot;:{&quot;title&quot;:&quot;FloatNav&quot;,&quot;id&quot;:&quot;components-float-nav-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/float-nav/index.md&quot;,&quot;directory&quot;:&quot;components/float-nav&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;FloatNav&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;悬浮导航&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/float-nav/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/float-nav&quot;,&quot;id&quot;:&quot;components-float-nav-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#floatnavwrapper\&quot;&gt;FloatNavWrapper&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#floatnav\&quot;&gt;FloatNav&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#navitem\&quot;&gt;NavItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/form/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何绑定，只要插入几个标签，就可以完成一个表格的搭建。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/comp.md&quot;:{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;组件通览 (默认值传递)&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;目前 Form 已经提供了12种通用表单域，满足各种场景的需求。\nForm 中所有表单域的默认值由 jsxvalues 统一管理。\n通用表单域不满足业务需求？&lt;a href=\&quot;/scene/commonForm/#code-box-scene-commonform-demo-definefield\&quot;&gt;点此查看如何自定义表单域&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/comp.md&quot;,&quot;filename&quot;:&quot;comp&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-comp&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/horizon.md&quot;:{&quot;title&quot;:&quot;横向排列&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;横向排列&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;无需任何设置，自动实现横排，并可以根据系数进行弹性布局。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/horizon.md&quot;,&quot;filename&quot;:&quot;horizon&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-horizon&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/layout.md&quot;:{&quot;title&quot;:&quot;布局&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;布局&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供竖向和横向两种排列方式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/layout.md&quot;,&quot;filename&quot;:&quot;layout&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-layout&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/max-width.md&quot;:{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;输入区域最大宽度&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;为了应对一些宽屏情况下自适应过长的问题，我们提供了两套最大宽度限制。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/max-width.md&quot;,&quot;filename&quot;:&quot;max-width&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-max-width&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/mode.md&quot;:{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;编辑查看模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Form 支持编辑和查看两种模式，并且支持随时切换，从此两个页面变成一个页面。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/mode.md&quot;,&quot;filename&quot;:&quot;mode&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-mode&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/search.md&quot;:{&quot;title&quot;:&quot;搜索框&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;搜索框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供复杂和精简的两种搜索模式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/search.md&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-search&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large/middle/small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/demo/validator.md&quot;:{&quot;title&quot;:&quot;校验和提示&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;校验和提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自带验证函数，并且支持自己手写，并分为实时验证与非实时验证。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/form/demo/validator.md&quot;,&quot;filename&quot;:&quot;validator&quot;,&quot;directory&quot;:&quot;components/form/demo&quot;,&quot;id&quot;:&quot;components-form-demo-validator&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/form/index.md&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;id&quot;:&quot;components-form-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/form/index.md&quot;,&quot;directory&quot;:&quot;components/form&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;description&quot;:&quot;form&quot;,&quot;order&quot;:&quot;7&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;screenshots&quot;:&quot;example/screenshot.png&quot;,&quot;chinese&quot;:&quot;表单&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/form/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/form&quot;,&quot;id&quot;:&quot;components-form-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#form\&quot;&gt;Form&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#form\&quot;&gt;Form&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#jsxvalues-的格式\&quot;&gt;jsxvalues 的格式&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formrow\&quot;&gt;FormRow&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formfield-通用配置\&quot;&gt;FormField 通用配置&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#validators\&quot;&gt;Validators&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#formfield-专属配置\&quot;&gt;FormField 专属配置&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputformfield\&quot;&gt;InputFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaformfield\&quot;&gt;TextAreaFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroupformfield\&quot;&gt;RadioGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#selectformfield\&quot;&gt;SelectFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#searchformfield\&quot;&gt;SearchFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#checkboxgroupformfield\&quot;&gt;CheckboxGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#dateformfield\&quot;&gt;DateFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#numberinputformfield\&quot;&gt;NumberInputFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cascadeselectformfield\&quot;&gt;CascadeSelectFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#pickableformfield\&quot;&gt;PickableFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#editorformfield\&quot;&gt;EditorFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#otherformfield\&quot;&gt;OtherFormField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#buttongroupformfield\&quot;&gt;ButtonGroupFormField&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/formatter/index.md&quot;:{&quot;title&quot;:&quot;Formatter&quot;,&quot;id&quot;:&quot;components-formatter-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/formatter/index.md&quot;,&quot;directory&quot;:&quot;components/formatter&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Formatter&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Tool&quot;,&quot;chinese&quot;:&quot;格式化&quot;,&quot;filepath&quot;:&quot;site/components/formatter/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/formatter&quot;,&quot;id&quot;:&quot;components-formatter-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#date\&quot;&gt;Date&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#money\&quot;&gt;money&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#cnmobile\&quot;&gt;cnmobile&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#card\&quot;&gt;card&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/grid/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-grid-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/grid/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/grid/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/grid/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/grid/demo&quot;,&quot;id&quot;:&quot;components-grid-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/grid/index.md&quot;:{&quot;title&quot;:&quot;Grid&quot;,&quot;id&quot;:&quot;components-grid-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalky&quot;},&quot;filepath&quot;:&quot;site/components/grid/index.md&quot;,&quot;directory&quot;:&quot;components/grid&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Grid&quot;,&quot;description&quot;:&quot;uxcore gird, will including checkbox, edit text field, column pick etc&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;栅格&quot;,&quot;order&quot;:&quot;1&quot;,&quot;subtype&quot;:&quot;Layout&quot;,&quot;filepath&quot;:&quot;site/components/grid/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/grid&quot;,&quot;id&quot;:&quot;components-grid-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#grid\&quot;&gt;Grid&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#row\&quot;&gt;Row&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#col\&quot;&gt;Col&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/icon/demo/basic.md&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;id&quot;:&quot;components-icon-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/icon/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/icon/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/icon/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/icon/demo&quot;,&quot;id&quot;:&quot;components-icon-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/icon/index.md&quot;:{&quot;title&quot;:&quot;Icon&quot;,&quot;id&quot;:&quot;components-icon-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/icon/index.md&quot;,&quot;directory&quot;:&quot;components/icon&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Icon&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;图标&quot;,&quot;filepath&quot;:&quot;site/components/icon/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/icon&quot;,&quot;id&quot;:&quot;components-icon-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/image/demo/basic.md&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;id&quot;:&quot;components-image-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/image/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/image/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击图标复制代码&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/image/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/image/demo&quot;,&quot;id&quot;:&quot;components-image-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/image/index.md&quot;:{&quot;title&quot;:&quot;Image&quot;,&quot;id&quot;:&quot;components-image-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/image/index.md&quot;,&quot;directory&quot;:&quot;components/image&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Image&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;图片&quot;,&quot;filepath&quot;:&quot;site/components/image/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/image&quot;,&quot;id&quot;:&quot;components-image-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/layout/demo/bothfixed.md&quot;:{&quot;title&quot;:&quot;左右都固定&quot;,&quot;id&quot;:&quot;components-layout-demo-bothfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/bothfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;bothfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;左右都固定&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/bothfixed.md&quot;,&quot;filename&quot;:&quot;bothfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-bothfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/leftfixed.md&quot;:{&quot;title&quot;:&quot;左侧自适应，右侧固定&quot;,&quot;id&quot;:&quot;components-layout-demo-leftfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/leftfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;leftfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;左侧自适应，右侧固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;右侧定宽 190 px，左侧自适应&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/leftfixed.md&quot;,&quot;filename&quot;:&quot;leftfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-leftfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/real.md&quot;:{&quot;title&quot;:&quot;常见场景&quot;,&quot;id&quot;:&quot;components-layout-demo-real&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/real.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;real&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;常见场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/real.md&quot;,&quot;filename&quot;:&quot;real&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-real&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/demo/rightfixed.md&quot;:{&quot;title&quot;:&quot;右侧自适应，左侧固定&quot;,&quot;id&quot;:&quot;components-layout-demo-rightfixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/layout/demo/rightfixed.md&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;filename&quot;:&quot;rightfixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;右侧自适应，左侧固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;左侧定宽 190 px，右侧自适应&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/layout/demo/rightfixed.md&quot;,&quot;filename&quot;:&quot;rightfixed&quot;,&quot;directory&quot;:&quot;components/layout/demo&quot;,&quot;id&quot;:&quot;components-layout-demo-rightfixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/layout/index.md&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;id&quot;:&quot;components-layout-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/layout/index.md&quot;,&quot;directory&quot;:&quot;components/layout&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;description&quot;:&quot;helping you to make an adaptive layout fastly&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;左右布局&quot;,&quot;order&quot;:&quot;0&quot;,&quot;subtype&quot;:&quot;Layout&quot;,&quot;filepath&quot;:&quot;site/components/layout/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/layout&quot;,&quot;id&quot;:&quot;components-layout-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#子组件\&quot;&gt;子组件&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#left-right\&quot;&gt;Left/Right&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/load-more/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-load-more-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/load-more/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/load-more/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/load-more/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/load-more/demo&quot;,&quot;id&quot;:&quot;components-load-more-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/load-more/index.md&quot;:{&quot;title&quot;:&quot;LoadMore&quot;,&quot;id&quot;:&quot;components-load-more-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/load-more/index.md&quot;,&quot;directory&quot;:&quot;components/load-more&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;LoadMore&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;加载更多&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/load-more/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/load-more&quot;,&quot;id&quot;:&quot;components-load-more-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/matrix/demo/advanced.md&quot;:{&quot;title&quot;:&quot;支持每个单元格配置宽高&quot;,&quot;id&quot;:&quot;components-matrix-demo-advanced&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/advanced.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;支持每个单元格配置宽高&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/advanced.md&quot;,&quot;filename&quot;:&quot;advanced&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-advanced&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-matrix-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Matrix 的基本使用，根据数据决定如何跨行跨列。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/demo/scene.md&quot;:{&quot;title&quot;:&quot;使用场景&quot;,&quot;id&quot;:&quot;components-matrix-demo-scene&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/matrix/demo/scene.md&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;filename&quot;:&quot;scene&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;使用场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/matrix/demo/scene.md&quot;,&quot;filename&quot;:&quot;scene&quot;,&quot;directory&quot;:&quot;components/matrix/demo&quot;,&quot;id&quot;:&quot;components-matrix-demo-scene&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/matrix/index.md&quot;:{&quot;title&quot;:&quot;Matrix&quot;,&quot;id&quot;:&quot;components-matrix-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/matrix/index.md&quot;,&quot;directory&quot;:&quot;components/matrix&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Matrix&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;数据矩阵&quot;,&quot;order&quot;:&quot;6&quot;,&quot;subtype&quot;:&quot;Matrix&quot;,&quot;filepath&quot;:&quot;site/components/matrix/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/matrix&quot;,&quot;id&quot;:&quot;components-matrix-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#data-structure\&quot;&gt;Data structure&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/mention/demo/contenteditable.md&quot;:{&quot;title&quot;:&quot;在contenteditable容器中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-contenteditable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/contenteditable.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;contenteditable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在contenteditable容器中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可在contenteditable容器中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/contenteditable.md&quot;,&quot;filename&quot;:&quot;contenteditable&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-contenteditable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/demo/formelement.md&quot;:{&quot;title&quot;:&quot;在表单元素中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-formelement&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/formelement.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;formelement&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在表单元素中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在 textarea 和 input 中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/formelement.md&quot;,&quot;filename&quot;:&quot;formelement&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-formelement&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/demo/tinymce.md&quot;:{&quot;title&quot;:&quot;在tinymce中使用&quot;,&quot;id&quot;:&quot;components-mention-demo-tinymce&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/mention/demo/tinymce.md&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;filename&quot;:&quot;tinymce&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;在tinymce中使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在 tinymce 中使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/mention/demo/tinymce.md&quot;,&quot;filename&quot;:&quot;tinymce&quot;,&quot;directory&quot;:&quot;components/mention/demo&quot;,&quot;id&quot;:&quot;components-mention-demo-tinymce&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/mention/index.md&quot;:{&quot;title&quot;:&quot;Mention&quot;,&quot;id&quot;:&quot;components-mention-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/mention/index.md&quot;,&quot;directory&quot;:&quot;components/mention&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Mention&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;At组件&quot;,&quot;order&quot;:&quot;9&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/mention/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/mention&quot;,&quot;id&quot;:&quot;components-mention-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mention\&quot;&gt;Mention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tinymcemention\&quot;&gt;TinymceMention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#contenteditableeditor\&quot;&gt;ContentEditableEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaeditor\&quot;&gt;TextareaEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputeditor\&quot;&gt;InputEditor&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mention\&quot;&gt;Mention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tinymcemention\&quot;&gt;TinymceMention&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#contenteditableeditor\&quot;&gt;ContentEditableEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#textareaeditor\&quot;&gt;TextareaEditor&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#inputeditor\&quot;&gt;InputEditor&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/menu/demo/basic.md&quot;:{&quot;title&quot;:&quot;顶部导航&quot;,&quot;id&quot;:&quot;components-menu-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/menu/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;顶部导航&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;水平的顶部导航菜单。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/menu/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;id&quot;:&quot;components-menu-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/menu/demo/nw.md&quot;:{&quot;title&quot;:&quot;无边框的样式&quot;,&quot;id&quot;:&quot;components-menu-demo-nw&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/menu/demo/nw.md&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;filename&quot;:&quot;nw&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无边框的样式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;垂直内嵌菜单的另一种样式，通过设置类名 kuma-menu-none-border 来实现无边框的样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/menu/demo/nw.md&quot;,&quot;filename&quot;:&quot;nw&quot;,&quot;directory&quot;:&quot;components/menu/demo&quot;,&quot;id&quot;:&quot;components-menu-demo-nw&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/menu/index.md&quot;:{&quot;title&quot;:&quot;Menu&quot;,&quot;id&quot;:&quot;components-menu-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/menu/index.md&quot;,&quot;directory&quot;:&quot;components/menu&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Menu&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;导航菜单&quot;,&quot;order&quot;:&quot;18&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/menu/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/menu&quot;,&quot;id&quot;:&quot;components-menu-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#menu\&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#item\&quot;&gt;Item&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#submenu\&quot;&gt;SubMenu&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/message/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-message-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;默认的提醒样式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/demo/duration.md&quot;:{&quot;title&quot;:&quot;消失时间&quot;,&quot;id&quot;:&quot;components-message-demo-duration&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/duration.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;duration&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;消失时间&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以设置每个 Message 的自动消失时间。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/duration.md&quot;,&quot;filename&quot;:&quot;duration&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-duration&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/demo/small.md&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;id&quot;:&quot;components-message-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/message/demo/small.md&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;小尺寸的提示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/message/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/message/demo&quot;,&quot;id&quot;:&quot;components-message-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/message/index.md&quot;:{&quot;title&quot;:&quot;Message&quot;,&quot;id&quot;:&quot;components-message-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/message/index.md&quot;,&quot;directory&quot;:&quot;components/message&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Message&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;全局提醒&quot;,&quot;filepath&quot;:&quot;site/components/message/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/message&quot;,&quot;id&quot;:&quot;components-message-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#也可以这样进行传参\&quot;&gt;也可以这样进行传参&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/multi-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-multi-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/disable.md&quot;:{&quot;title&quot;:&quot;不可控制模式&quot;,&quot;id&quot;:&quot;components-multi-select-demo-disable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/disable.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不可控制模式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/disable.md&quot;,&quot;filename&quot;:&quot;disable&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-disable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/hidebutton.md&quot;:{&quot;title&quot;:&quot;隐藏控制按钮&quot;,&quot;id&quot;:&quot;components-multi-select-demo-hidebutton&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/hidebutton.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;hidebutton&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;隐藏控制按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;隐藏控制按钮&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/hidebutton.md&quot;,&quot;filename&quot;:&quot;hidebutton&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-hidebutton&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/max.md&quot;:{&quot;title&quot;:&quot;最大限制&quot;,&quot;id&quot;:&quot;components-multi-select-demo-max&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/max.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;max&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;最大限制&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最多选择 5 项 &lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/max.md&quot;,&quot;filename&quot;:&quot;max&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-max&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-multi-select-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/multi-select/demo/size.md&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/multi-select/demo&quot;,&quot;id&quot;:&quot;components-multi-select-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/multi-select/index.md&quot;:{&quot;title&quot;:&quot;MultiSelect&quot;,&quot;id&quot;:&quot;components-multi-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/multi-select/index.md&quot;,&quot;directory&quot;:&quot;components/multi-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;MultiSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;复选择器&quot;,&quot;filepath&quot;:&quot;site/components/multi-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/multi-select&quot;,&quot;id&quot;:&quot;components-multi-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#mulitselect\&quot;&gt;MulitSelect&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#mulitselectitem\&quot;&gt;MulitSelectItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/notice-icon/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-notice-icon-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/notice-icon/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/notice-icon/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/notice-icon/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/notice-icon/demo&quot;,&quot;id&quot;:&quot;components-notice-icon-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/notice-icon/index.md&quot;:{&quot;title&quot;:&quot;NoticeIcon&quot;,&quot;id&quot;:&quot;components-notice-icon-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;Amanda111&quot;},&quot;filepath&quot;:&quot;site/components/notice-icon/index.md&quot;,&quot;directory&quot;:&quot;components/notice-icon&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;NoticeIcon&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;通知图标&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/notice-icon/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/notice-icon&quot;,&quot;id&quot;:&quot;components-notice-icon-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/pagination/demo/mini.md&quot;:{&quot;title&quot;:&quot;迷你&quot;,&quot;id&quot;:&quot;components-pagination-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;迷你&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;迷你版本。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/demo/total.md&quot;:{&quot;title&quot;:&quot;显示总条数&quot;,&quot;id&quot;:&quot;components-pagination-demo-total&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/total.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;total&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;显示总条数&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;更多分页。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/total.md&quot;,&quot;filename&quot;:&quot;total&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-total&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/demo/unknown-total.md&quot;:{&quot;title&quot;:&quot;总数未知&quot;,&quot;id&quot;:&quot;components-pagination-demo-unknown-total&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pagination/demo/unknown-total.md&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;filename&quot;:&quot;unknown-total&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;总数未知&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基础分页。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/pagination/demo/unknown-total.md&quot;,&quot;filename&quot;:&quot;unknown-total&quot;,&quot;directory&quot;:&quot;components/pagination/demo&quot;,&quot;id&quot;:&quot;components-pagination-demo-unknown-total&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pagination/index.md&quot;:{&quot;title&quot;:&quot;Pagination&quot;,&quot;id&quot;:&quot;components-pagination-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/pagination/index.md&quot;,&quot;directory&quot;:&quot;components/pagination&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Pagination&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;分页&quot;,&quot;order&quot;:&quot;3&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/pagination/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/pagination&quot;,&quot;id&quot;:&quot;components-pagination-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#pagination\&quot;&gt;Pagination&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/pickable/demo/fold-max-lines.md&quot;:{&quot;title&quot;:&quot;自动折叠（配置行数）&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold-max-lines&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/fold-max-lines.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;fold-max-lines&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自动折叠（配置行数）&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过配置 maxLines 可以实现不同的收起效果&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/fold-max-lines.md&quot;,&quot;filename&quot;:&quot;fold-max-lines&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold-max-lines&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/fold.md&quot;:{&quot;title&quot;:&quot;自动折叠&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/fold.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;fold&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自动折叠&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 enableFold 打开&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/fold.md&quot;,&quot;filename&quot;:&quot;fold&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-fold&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/hook-single.md&quot;:{&quot;title&quot;:&quot;精简的多选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook-single&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/hook-single.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;hook-single&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简的多选模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;带对勾的样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/hook-single.md&quot;,&quot;filename&quot;:&quot;hook-single&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook-single&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/hook.md&quot;:{&quot;title&quot;:&quot;多选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/hook.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;hook&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;带对勾的样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/hook.md&quot;,&quot;filename&quot;:&quot;hook&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-hook&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/pickable.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-pickable-demo-pickable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/pickable.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;pickable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/pickable.md&quot;,&quot;filename&quot;:&quot;pickable&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-pickable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/demo/simple.md&quot;:{&quot;title&quot;:&quot;精简的单选模式&quot;,&quot;id&quot;:&quot;components-pickable-demo-simple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/pickable/demo/simple.md&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简的单选模式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/pickable/demo/simple.md&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;directory&quot;:&quot;components/pickable/demo&quot;,&quot;id&quot;:&quot;components-pickable-demo-simple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/pickable/index.md&quot;:{&quot;title&quot;:&quot;Pickable&quot;,&quot;id&quot;:&quot;components-pickable-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;onbing&quot;},&quot;filepath&quot;:&quot;site/components/pickable/index.md&quot;,&quot;directory&quot;:&quot;components/pickable&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Pickable&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;筛选器&quot;,&quot;filepath&quot;:&quot;site/components/pickable/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/pickable&quot;,&quot;id&quot;:&quot;components-pickable-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#item-props\&quot;&gt;Item Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/popover/demo/button.md&quot;:{&quot;title&quot;:&quot;内置按钮&quot;,&quot;id&quot;:&quot;components-popover-demo-button&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/button.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;button&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;内置按钮&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;有时你可能希望气泡内有确定取消的按钮可以关闭气泡，这个例子对应这种场景。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/button.md&quot;,&quot;filename&quot;:&quot;button&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-button&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/demo/click.md&quot;:{&quot;title&quot;:&quot;点击弹出&quot;,&quot;id&quot;:&quot;components-popover-demo-click&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/click.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点击弹出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击弹出。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/click.md&quot;,&quot;filename&quot;:&quot;click&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-click&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/demo/hover.md&quot;:{&quot;title&quot;:&quot;悬浮弹出&quot;,&quot;id&quot;:&quot;components-popover-demo-hover&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/popover/demo/hover.md&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;filename&quot;:&quot;hover&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;悬浮弹出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;悬浮弹出。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/popover/demo/hover.md&quot;,&quot;filename&quot;:&quot;hover&quot;,&quot;directory&quot;:&quot;components/popover/demo&quot;,&quot;id&quot;:&quot;components-popover-demo-hover&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/popover/index.md&quot;:{&quot;title&quot;:&quot;Popover&quot;,&quot;id&quot;:&quot;components-popover-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/popover/index.md&quot;,&quot;directory&quot;:&quot;components/popover&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Popover&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;弹窗&quot;,&quot;order&quot;:&quot;12&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/popover/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/popover&quot;,&quot;id&quot;:&quot;components-popover-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/progress/demo/basic.md&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;标准的进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/circle.md&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-circle&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/circle.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;circle&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;圆形进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/circle.md&quot;,&quot;filename&quot;:&quot;circle&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-circle&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/dynamic.md&quot;:{&quot;title&quot;:&quot;动态展示&quot;,&quot;id&quot;:&quot;components-progress-demo-dynamic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/dynamic.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动态展示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;会动的进度条才是好进度条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/dynamic.md&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-dynamic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/demo/mini.md&quot;:{&quot;title&quot;:&quot;小型进度条&quot;,&quot;id&quot;:&quot;components-progress-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/progress/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小型进度条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;适合放在较狭窄的区域内。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/progress/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/progress/demo&quot;,&quot;id&quot;:&quot;components-progress-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/progress/index.md&quot;:{&quot;title&quot;:&quot;Progress&quot;,&quot;id&quot;:&quot;components-progress-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/progress/index.md&quot;,&quot;directory&quot;:&quot;components/progress&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Progress&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;进度条&quot;,&quot;order&quot;:&quot;16&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/progress/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/progress&quot;,&quot;id&quot;:&quot;components-progress-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#line\&quot;&gt;Line&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#circle\&quot;&gt;Circle&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/radiogroup/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;id&quot;:&quot;components-radiogroup-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/radiogroup/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/radiogroup/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;最简单的用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/radiogroup/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/radiogroup/demo&quot;,&quot;id&quot;:&quot;components-radiogroup-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/radiogroup/index.md&quot;:{&quot;title&quot;:&quot;RadioGroup&quot;,&quot;id&quot;:&quot;components-radiogroup-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/radiogroup/index.md&quot;,&quot;directory&quot;:&quot;components/radiogroup&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;RadioGroup&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;单选按钮组&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/radiogroup/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/radiogroup&quot;,&quot;id&quot;:&quot;components-radiogroup-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroup\&quot;&gt;Radiogroup&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#radiogroup-item\&quot;&gt;Radiogroup.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/rate/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-rate-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/bottom.md&quot;:{&quot;title&quot;:&quot;Tip 显示在下方&quot;,&quot;id&quot;:&quot;components-rate-demo-bottom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/bottom.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;bottom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tip 显示在下方&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/bottom.md&quot;,&quot;filename&quot;:&quot;bottom&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-bottom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/emotion.md&quot;:{&quot;title&quot;:&quot;情感化评价&quot;,&quot;id&quot;:&quot;components-rate-demo-emotion&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/emotion.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;emotion&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;情感化评价&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/emotion.md&quot;,&quot;filename&quot;:&quot;emotion&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-emotion&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/demo/size.md&quot;:{&quot;title&quot;:&quot;大尺寸&quot;,&quot;id&quot;:&quot;components-rate-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/rate/demo/size.md&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大尺寸&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/rate/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/rate/demo&quot;,&quot;id&quot;:&quot;components-rate-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/rate/index.md&quot;:{&quot;title&quot;:&quot;Rate&quot;,&quot;id&quot;:&quot;components-rate-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;quanyun.mqy&quot;},&quot;filepath&quot;:&quot;site/components/rate/index.md&quot;,&quot;directory&quot;:&quot;components/rate&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Rate&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;chinese&quot;:&quot;评分&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/rate/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/rate&quot;,&quot;id&quot;:&quot;components-rate-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/select2/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-select2-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/combobox.md&quot;:{&quot;title&quot;:&quot;智能提示&quot;,&quot;id&quot;:&quot;components-select2-demo-combobox&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/combobox.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;combobox&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;智能提示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;输入框自动完成功能，下面是一个账号注册表单的例子。&lt;br&gt;同时这也是一个应用 combobox 模式的例子，除了提示的内容也可以将自己的输入作为选择，通常用于搜索。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/combobox.md&quot;,&quot;filename&quot;:&quot;combobox&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-combobox&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/coordinate.md&quot;:{&quot;title&quot;:&quot;联动&quot;,&quot;id&quot;:&quot;components-select2-demo-coordinate&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/coordinate.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;coordinate&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;联动&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;省市联动是典型的例子。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/coordinate.md&quot;,&quot;filename&quot;:&quot;coordinate&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-coordinate&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-select2-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/group.md&quot;:{&quot;title&quot;:&quot;分组&quot;,&quot;id&quot;:&quot;components-select2-demo-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/group.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;分组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;option分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/group.md&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/inline.md&quot;:{&quot;title&quot;:&quot;不带边框选择&quot;,&quot;id&quot;:&quot;components-select2-demo-inline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/inline.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不带边框选择&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;不带边框选择。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/inline.md&quot;,&quot;filename&quot;:&quot;inline&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-inline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/multiple-singleline.md&quot;:{&quot;title&quot;:&quot;多选 - 单行展示&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple-singleline&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/multiple-singleline.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;multiple-singleline&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选 - 单行展示&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在少数情况下，可能不希望多选框展开，这时可以使用样式覆盖。&lt;br&gt;我们不推荐这种交互形式，因为选择区域的收缩，可能会损失一些功能。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/multiple-singleline.md&quot;,&quot;filename&quot;:&quot;multiple-singleline&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple-singleline&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多选，从已有条目中选择（scroll the menu）&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/search.md&quot;:{&quot;title&quot;:&quot;不显示搜索框&quot;,&quot;id&quot;:&quot;components-select2-demo-search&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/search.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;不显示搜索框&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;当不需要搜索功能时，可以将 showSearch 置为 false&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/search.md&quot;,&quot;filename&quot;:&quot;search&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-search&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-select2-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/size.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供 large、middle、small 三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/demo/tags.md&quot;:{&quot;title&quot;:&quot;标签&quot;,&quot;id&quot;:&quot;components-select2-demo-tags&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/select2/demo/tags.md&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;filename&quot;:&quot;tags&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;标签&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;这种模式下可以让输入的值成为一个选项。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/select2/demo/tags.md&quot;,&quot;filename&quot;:&quot;tags&quot;,&quot;directory&quot;:&quot;components/select2/demo&quot;,&quot;id&quot;:&quot;components-select2-demo-tags&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/select2/index.md&quot;:{&quot;title&quot;:&quot;Select2&quot;,&quot;id&quot;:&quot;components-select2-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/select2/index.md&quot;,&quot;directory&quot;:&quot;components/select2&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Select2&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;选择器&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/select2/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/select2&quot;,&quot;id&quot;:&quot;components-select2-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#select-props\&quot;&gt;Select props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#option-props\&quot;&gt;Option props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#optgroup-props\&quot;&gt;OptGroup props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/steps/demo/arrow.md&quot;:{&quot;title&quot;:&quot;箭头型&quot;,&quot;id&quot;:&quot;components-steps-demo-arrow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/arrow.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;arrow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;箭头型&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/arrow.md&quot;,&quot;filename&quot;:&quot;arrow&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-arrow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-steps-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/custom.md&quot;:{&quot;title&quot;:&quot;自定义状态&quot;,&quot;id&quot;:&quot;components-steps-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义状态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;可以使用 status 定义每个步骤的状态。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;8&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/editable.md&quot;:{&quot;title&quot;:&quot;可返回编辑&quot;,&quot;id&quot;:&quot;components-steps-demo-editable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/editable.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;editable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可返回编辑&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;对可返回编辑的 Step 做强调显示。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/editable.md&quot;,&quot;filename&quot;:&quot;editable&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-editable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/error.md&quot;:{&quot;title&quot;:&quot;出错状态&quot;,&quot;id&quot;:&quot;components-steps-demo-error&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/error.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;error&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;出错状态&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;每种风格都有对应的出错状态。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/error.md&quot;,&quot;filename&quot;:&quot;error&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-error&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/mini.md&quot;:{&quot;title&quot;:&quot;迷你版&quot;,&quot;id&quot;:&quot;components-steps-demo-mini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/mini.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;迷你版&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;迷你版的步骤条，通过设置 &lt;Steps size=\&quot;small\&quot;&gt; 启用.&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/mini.md&quot;,&quot;filename&quot;:&quot;mini&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-mini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/vertical.md&quot;:{&quot;title&quot;:&quot;竖直方向的步骤条&quot;,&quot;id&quot;:&quot;components-steps-demo-vertical&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/vertical.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;vertical&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;竖直方向的步骤条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的竖直方向的步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/vertical.md&quot;,&quot;filename&quot;:&quot;vertical&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-vertical&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/demo/verticalmini.md&quot;:{&quot;title&quot;:&quot;竖直方向的小型步骤条&quot;,&quot;id&quot;:&quot;components-steps-demo-verticalmini&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/steps/demo/verticalmini.md&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;filename&quot;:&quot;verticalmini&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;竖直方向的小型步骤条&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;简单的竖直方向的小型步骤条。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/steps/demo/verticalmini.md&quot;,&quot;filename&quot;:&quot;verticalmini&quot;,&quot;directory&quot;:&quot;components/steps/demo&quot;,&quot;id&quot;:&quot;components-steps-demo-verticalmini&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/steps/index.md&quot;:{&quot;title&quot;:&quot;Steps&quot;,&quot;id&quot;:&quot;components-steps-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/steps/index.md&quot;,&quot;directory&quot;:&quot;components/steps&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Steps&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;步骤条&quot;,&quot;order&quot;:&quot;17&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/steps/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/steps&quot;,&quot;id&quot;:&quot;components-steps-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#steps\&quot;&gt;Steps&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#steps-step\&quot;&gt;Steps.Step&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/switch/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-switch-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/control.md&quot;:{&quot;title&quot;:&quot;受控&quot;,&quot;id&quot;:&quot;components-switch-demo-control&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/control.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/control.md&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-control&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-switch-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/loading.md&quot;:{&quot;title&quot;:&quot;加载状态&quot;,&quot;id&quot;:&quot;components-switch-demo-loading&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/loading.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;加载状态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/loading.md&quot;,&quot;filename&quot;:&quot;loading&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-loading&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/demo/small.md&quot;:{&quot;title&quot;:&quot;无文字&quot;,&quot;id&quot;:&quot;components-switch-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/switch/demo/small.md&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;无文字&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/switch/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/switch/demo&quot;,&quot;id&quot;:&quot;components-switch-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/switch/index.md&quot;:{&quot;title&quot;:&quot;Switch&quot;,&quot;id&quot;:&quot;components-switch-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/switch/index.md&quot;,&quot;directory&quot;:&quot;components/switch&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Switch&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;9&quot;,&quot;chinese&quot;:&quot;开关&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/switch/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/switch&quot;,&quot;id&quot;:&quot;components-switch-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/table/demo/actionbar.md&quot;:{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;顶部操作栏&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;14&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/actioncolumn.md&quot;:{&quot;title&quot;:&quot;操作列&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;操作列&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/adv.md&quot;:{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本表格&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本表格&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/edit.md&quot;:{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;行内编辑表格，除了内置的几种可编辑列之外，我们还提供了自定义可编辑列的方法，请点击相应 &lt;a href=\&quot;/scene/customTable/#code-box-scene-customtable-demo-custom-edit\&quot;&gt;场景&lt;/a&gt; 查看&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/filter.md&quot;:{&quot;title&quot;:&quot;列筛选&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列筛选&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/fixed.md&quot;:{&quot;title&quot;:&quot;列固定&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;支持左侧或右侧列固定&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/footer.md&quot;:{&quot;title&quot;:&quot;页底&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;页底&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供一个空白行供自定义渲染，适用于 合计 等场景，同时支持行分组 Footer，可选择性关闭。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;13&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/group.md&quot;:{&quot;title&quot;:&quot;大表头&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大表头&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;列分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/percent.md&quot;:{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;表格的列按照百分比布局，同时支持和列固定的组合。拖动屏幕边缘，调整表格整体宽度试一试~&lt;/p&gt;\n&lt;p&gt;列标题处支持拖拽调整列宽。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/row-group.md&quot;:{&quot;title&quot;:&quot;行分组&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行分组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;根据某列的值进行行分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;12&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/style.md&quot;:{&quot;title&quot;:&quot;风格&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;风格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;有三种风格可控选择：分割线、线框和斑马纹。&lt;br&gt;有两种尺寸可以选择：small &amp;amp; middle&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/subcomp.md&quot;:{&quot;title&quot;:&quot;行展开&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行展开&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Table 允许用户传入自定义行展开内容。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/demo/tree.md&quot;:{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;树形表格，数据格式参考：http://uxco.re/components/table/demo/data.json&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/table/index.md&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;id&quot;:&quot;components-table-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;zhouquan.yezq&quot;},&quot;filepath&quot;:&quot;site/components/table/index.md&quot;,&quot;directory&quot;:&quot;components/table&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;表格&quot;,&quot;order&quot;:&quot;6&quot;,&quot;subtype&quot;:&quot;Matrix&quot;,&quot;filepath&quot;:&quot;site/components/table/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/table&quot;,&quot;id&quot;:&quot;components-table-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#行内编辑用\&quot;&gt;行内编辑用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#获取数据\&quot;&gt;获取数据&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#创建一个-cellfield\&quot;&gt;创建一个 CellField&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#树形表格用\&quot;&gt;树形表格用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#其他\&quot;&gt;其他&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#折叠展开专用\&quot;&gt;折叠展开专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tree-模式专用\&quot;&gt;Tree 模式专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#行内编辑表格专用\&quot;&gt;行内编辑表格专用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项-jsxcolumns\&quot;&gt;列配置项(jsxcolumns)&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项的例子\&quot;&gt;列配置项的例子&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#列配置项的例子2（带列群组-since-ver-1-3-0）\&quot;&gt;列配置项的例子2（带列群组, since ver. 1.3.0）&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#rowselection-的例子\&quot;&gt;rowSelection 的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#返回的数据格式\&quot;&gt;返回的数据格式&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#actionbar-配置的例子\&quot;&gt;ActionBar 配置的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#actions-配置的例子\&quot;&gt;actions 配置的例子&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#对于多行的支持\&quot;&gt;对于多行的支持&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tabs/demo/basic.md&quot;:{&quot;title&quot;:&quot;卡片式&quot;,&quot;id&quot;:&quot;components-tabs-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;卡片式&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/brick.md&quot;:{&quot;title&quot;:&quot;胶囊型&quot;,&quot;id&quot;:&quot;components-tabs-demo-brick&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/brick.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;brick&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;胶囊型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;BRICK&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/brick.md&quot;,&quot;filename&quot;:&quot;brick&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-brick&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/disabled.md&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;id&quot;:&quot;components-tabs-demo-disabled&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/disabled.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;禁用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;禁用某一项。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/disabled.md&quot;,&quot;filename&quot;:&quot;disabled&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-disabled&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/open.md&quot;:{&quot;title&quot;:&quot;标准型&quot;,&quot;id&quot;:&quot;components-tabs-demo-open&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/open.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;open&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;标准型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;开放型样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/open.md&quot;,&quot;filename&quot;:&quot;open&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-open&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/overflow.md&quot;:{&quot;title&quot;:&quot;溢出&quot;,&quot;id&quot;:&quot;components-tabs-demo-overflow&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/overflow.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;overflow&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;溢出&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;开放型样式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/overflow.md&quot;,&quot;filename&quot;:&quot;overflow&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-overflow&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/demo/small.md&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;id&quot;:&quot;components-tabs-demo-small&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tabs/demo/small.md&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;小尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;小（局部）tab&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tabs/demo/small.md&quot;,&quot;filename&quot;:&quot;small&quot;,&quot;directory&quot;:&quot;components/tabs/demo&quot;,&quot;id&quot;:&quot;components-tabs-demo-small&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tabs/index.md&quot;:{&quot;title&quot;:&quot;Tabs&quot;,&quot;id&quot;:&quot;components-tabs-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/tabs/index.md&quot;,&quot;directory&quot;:&quot;components/tabs&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tabs&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;选项卡&quot;,&quot;order&quot;:&quot;5&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/tabs/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tabs&quot;,&quot;id&quot;:&quot;components-tabs-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tabs\&quot;&gt;Tabs&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tabpane\&quot;&gt;TabPane&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tag/demo/add.md&quot;:{&quot;title&quot;:&quot;添加新标签&quot;,&quot;id&quot;:&quot;components-tag-demo-add&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/add.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;add&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;添加新标签&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/add.md&quot;,&quot;filename&quot;:&quot;add&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-add&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/complex.md&quot;:{&quot;title&quot;:&quot;实际场景&quot;,&quot;id&quot;:&quot;components-tag-demo-complex&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/complex.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;complex&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;实际场景&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/complex.md&quot;,&quot;filename&quot;:&quot;complex&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-complex&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/like.md&quot;:{&quot;title&quot;:&quot;点赞&quot;,&quot;id&quot;:&quot;components-tag-demo-like&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/like.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;like&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;点赞&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/like.md&quot;,&quot;filename&quot;:&quot;like&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-like&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/demo/show.md&quot;:{&quot;title&quot;:&quot;展示型&quot;,&quot;id&quot;:&quot;components-tag-demo-show&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tag/demo/show.md&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;展示型&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;用于展示的 tag。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tag/demo/show.md&quot;,&quot;filename&quot;:&quot;show&quot;,&quot;directory&quot;:&quot;components/tag/demo&quot;,&quot;id&quot;:&quot;components-tag-demo-show&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tag/index.md&quot;:{&quot;title&quot;:&quot;Tag&quot;,&quot;id&quot;:&quot;components-tag-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;peijie.dpj&quot;},&quot;filepath&quot;:&quot;site/components/tag/index.md&quot;,&quot;directory&quot;:&quot;components/tag&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tag&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;标签&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/tag/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tag&quot;,&quot;id&quot;:&quot;components-tag-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tag\&quot;&gt;Tag&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#tagitem\&quot;&gt;TagItem&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/time-picker/demo/12h.md&quot;:{&quot;title&quot;:&quot;12 小时制&quot;,&quot;id&quot;:&quot;components-time-picker-demo-12h&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/12h.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;12h&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;12 小时制&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/12h.md&quot;,&quot;filename&quot;:&quot;12h&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-12h&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-time-picker-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/control.md&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;id&quot;:&quot;components-time-picker-demo-control&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/control.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 value 和 onChange 进入受控模式&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/control.md&quot;,&quot;filename&quot;:&quot;control&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-control&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/hm.md&quot;:{&quot;title&quot;:&quot;选择时分&quot;,&quot;id&quot;:&quot;components-time-picker-demo-hm&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/hm.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;hm&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;选择时分&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/hm.md&quot;,&quot;filename&quot;:&quot;hm&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-hm&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/demo/size.md&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;id&quot;:&quot;components-time-picker-demo-size&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/time-picker/demo/size.md&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;尺寸&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供大中小三种尺寸&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/demo/size.md&quot;,&quot;filename&quot;:&quot;size&quot;,&quot;directory&quot;:&quot;components/time-picker/demo&quot;,&quot;id&quot;:&quot;components-time-picker-demo-size&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/time-picker/index.md&quot;:{&quot;title&quot;:&quot;TimePicker&quot;,&quot;id&quot;:&quot;components-time-picker-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/time-picker/index.md&quot;,&quot;directory&quot;:&quot;components/time-picker&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;TimePicker&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;chinese&quot;:&quot;时间选择器&quot;,&quot;filepath&quot;:&quot;site/components/time-picker/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/time-picker&quot;,&quot;id&quot;:&quot;components-time-picker-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/timeline/demo/addons.md&quot;:{&quot;title&quot;:&quot;指定最后一个幽灵节点&quot;,&quot;id&quot;:&quot;components-timeline-demo-addons&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/addons.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;addons&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;指定最后一个幽灵节点&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/addons.md&quot;,&quot;filename&quot;:&quot;addons&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-addons&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-timeline-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/demo/custom.md&quot;:{&quot;title&quot;:&quot;自定义线条颜色&quot;,&quot;id&quot;:&quot;components-timeline-demo-custom&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/timeline/demo/custom.md&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义线条颜色&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义线条颜色&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/timeline/demo/custom.md&quot;,&quot;filename&quot;:&quot;custom&quot;,&quot;directory&quot;:&quot;components/timeline/demo&quot;,&quot;id&quot;:&quot;components-timeline-demo-custom&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/timeline/index.md&quot;:{&quot;title&quot;:&quot;Timeline&quot;,&quot;id&quot;:&quot;components-timeline-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;muwen.lb&quot;},&quot;filepath&quot;:&quot;site/components/timeline/index.md&quot;,&quot;directory&quot;:&quot;components/timeline&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Timeline&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;chinese&quot;:&quot;时间轴&quot;,&quot;filepath&quot;:&quot;site/components/timeline/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/timeline&quot;,&quot;id&quot;:&quot;components-timeline-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#timeline\&quot;&gt;Timeline&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#timeline-item\&quot;&gt;Timeline.Item&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tinymce/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-tinymce-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tinymce/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;id&quot;:&quot;components-tinymce-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tinymce/demo/simple.md&quot;:{&quot;title&quot;:&quot;精简版&quot;,&quot;id&quot;:&quot;components-tinymce-demo-simple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tinymce/demo/simple.md&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;精简版&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;精简的 tinymce。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/demo/simple.md&quot;,&quot;filename&quot;:&quot;simple&quot;,&quot;directory&quot;:&quot;components/tinymce/demo&quot;,&quot;id&quot;:&quot;components-tinymce-demo-simple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tinymce/index.md&quot;:{&quot;title&quot;:&quot;Tinymce&quot;,&quot;id&quot;:&quot;components-tinymce-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/tinymce/index.md&quot;,&quot;directory&quot;:&quot;components/tinymce&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tinymce&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;富文本&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/tinymce/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tinymce&quot;,&quot;id&quot;:&quot;components-tinymce-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#图片上传配置\&quot;&gt;图片上传配置&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#events-包括\&quot;&gt;Events 包括&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#faq\&quot;&gt;FAQ&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/title/demo/combo.md&quot;:{&quot;title&quot;:&quot;一、二、三级标题混排&quot;,&quot;id&quot;:&quot;components-title-demo-combo&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/combo.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;combo&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;一、二、三级标题混排&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;一、二、三级标题混排&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/combo.md&quot;,&quot;filename&quot;:&quot;combo&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-combo&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/no-deco.md&quot;:{&quot;title&quot;:&quot;仅渲染文字&quot;,&quot;id&quot;:&quot;components-title-demo-no-deco&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/no-deco.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;no-deco&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;仅渲染文字&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;没有额外的间距和修饰物，不能开箱即用，但具有更加灵活的组合能力&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/no-deco.md&quot;,&quot;filename&quot;:&quot;no-deco&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-no-deco&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/primary.md&quot;:{&quot;title&quot;:&quot;一级标题&quot;,&quot;id&quot;:&quot;components-title-demo-primary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/primary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;primary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;一级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;一级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/primary.md&quot;,&quot;filename&quot;:&quot;primary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-primary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/secondary.md&quot;:{&quot;title&quot;:&quot;二级标题&quot;,&quot;id&quot;:&quot;components-title-demo-secondary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/secondary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;secondary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;二级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;二级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/secondary.md&quot;,&quot;filename&quot;:&quot;secondary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-secondary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/demo/thirdary.md&quot;:{&quot;title&quot;:&quot;三级标题&quot;,&quot;id&quot;:&quot;components-title-demo-thirdary&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/title/demo/thirdary.md&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;filename&quot;:&quot;thirdary&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;三级标题&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;三级标题&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/title/demo/thirdary.md&quot;,&quot;filename&quot;:&quot;thirdary&quot;,&quot;directory&quot;:&quot;components/title/demo&quot;,&quot;id&quot;:&quot;components-title-demo-thirdary&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/title/index.md&quot;:{&quot;title&quot;:&quot;Title&quot;,&quot;id&quot;:&quot;components-title-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/title/index.md&quot;,&quot;directory&quot;:&quot;components/title&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Title&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;标题&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/title/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/title&quot;,&quot;id&quot;:&quot;components-title-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/tooltip/demo/black.md&quot;:{&quot;title&quot;:&quot;黑色&quot;,&quot;id&quot;:&quot;components-tooltip-demo-black&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tooltip/demo/black.md&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;filename&quot;:&quot;black&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;黑色&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;黑色版本&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/demo/black.md&quot;,&quot;filename&quot;:&quot;black&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;id&quot;:&quot;components-tooltip-demo-black&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tooltip/demo/placement.md&quot;:{&quot;title&quot;:&quot;位置&quot;,&quot;id&quot;:&quot;components-tooltip-demo-placement&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tooltip/demo/placement.md&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;filename&quot;:&quot;placement&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;位置&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;目前支持 12 个方向。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/demo/placement.md&quot;,&quot;filename&quot;:&quot;placement&quot;,&quot;directory&quot;:&quot;components/tooltip/demo&quot;,&quot;id&quot;:&quot;components-tooltip-demo-placement&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tooltip/index.md&quot;:{&quot;title&quot;:&quot;Tooltip&quot;,&quot;id&quot;:&quot;components-tooltip-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;vincent.bian&quot;},&quot;filepath&quot;:&quot;site/components/tooltip/index.md&quot;,&quot;directory&quot;:&quot;components/tooltip&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tooltip&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;文字提示&quot;,&quot;order&quot;:&quot;4&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/tooltip/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tooltip&quot;,&quot;id&quot;:&quot;components-tooltip-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/totop/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-totop-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/totop/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/totop/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/totop/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/totop/demo&quot;,&quot;id&quot;:&quot;components-totop-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/totop/index.md&quot;:{&quot;title&quot;:&quot;Totop&quot;,&quot;id&quot;:&quot;components-totop-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternaslky&quot;},&quot;filepath&quot;:&quot;site/components/totop/index.md&quot;,&quot;directory&quot;:&quot;components/totop&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Totop&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;返回顶部&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/totop/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/totop&quot;,&quot;id&quot;:&quot;components-totop-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/transfer/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-transfer-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/transfer/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/transfer/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本使用和常见操作&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/transfer/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/transfer/demo&quot;,&quot;id&quot;:&quot;components-transfer-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/transfer/index.md&quot;:{&quot;title&quot;:&quot;Transfer&quot;,&quot;id&quot;:&quot;components-transfer-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/transfer/index.md&quot;,&quot;directory&quot;:&quot;components/transfer&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Transfer&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;双栏选择框&quot;,&quot;order&quot;:&quot;11&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/transfer/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/transfer&quot;,&quot;id&quot;:&quot;components-transfer-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/tree/demo/actions.md&quot;:{&quot;title&quot;:&quot;操作项&quot;,&quot;id&quot;:&quot;components-tree-demo-actions&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/actions.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;actions&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;操作项&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;加入一些对树节点的一些操作&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/actions.md&quot;,&quot;filename&quot;:&quot;actions&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-actions&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-tree-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/checked.md&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;id&quot;:&quot;components-tree-demo-checked&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/checked.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;checked&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;受控模式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;常用模式，通常对树结构数据需要精确控制时需要使用 受控模式。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/checked.md&quot;,&quot;filename&quot;:&quot;checked&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-checked&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/drag.md&quot;:{&quot;title&quot;:&quot;拖拽&quot;,&quot;id&quot;:&quot;components-tree-demo-drag&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/drag.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;drag&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;拖拽&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;将节点拖拽到其他节点内部或前后。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/drag.md&quot;,&quot;filename&quot;:&quot;drag&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-drag&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/dynamic.md&quot;:{&quot;title&quot;:&quot;动态加载&quot;,&quot;id&quot;:&quot;components-tree-demo-dynamic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/dynamic.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;动态加载&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击展开节点，动态加载数据。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/dynamic.md&quot;,&quot;filename&quot;:&quot;dynamic&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-dynamic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/demo/selectable.md&quot;:{&quot;title&quot;:&quot;可勾选&quot;,&quot;id&quot;:&quot;components-tree-demo-selectable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree/demo/selectable.md&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;filename&quot;:&quot;selectable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;可勾选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供复选框操作功能&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/tree/demo/selectable.md&quot;,&quot;filename&quot;:&quot;selectable&quot;,&quot;directory&quot;:&quot;components/tree/demo&quot;,&quot;id&quot;:&quot;components-tree-demo-selectable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree/index.md&quot;:{&quot;title&quot;:&quot;Tree&quot;,&quot;id&quot;:&quot;components-tree-index&quot;,&quot;tags&quot;:{},&quot;filepath&quot;:&quot;site/components/tree/index.md&quot;,&quot;directory&quot;:&quot;components/tree&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tree&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;树形控件&quot;,&quot;order&quot;:&quot;10&quot;,&quot;subtype&quot;:&quot;Navigation&quot;,&quot;filepath&quot;:&quot;site/components/tree/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tree&quot;,&quot;id&quot;:&quot;components-tree-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#tree-props\&quot;&gt;Tree props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#treenode-props\&quot;&gt;TreeNode props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/tree-select/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-tree-select-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/demo/check.md&quot;:{&quot;title&quot;:&quot;check select&quot;,&quot;id&quot;:&quot;components-tree-select-demo-check&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/check.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;check&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;check select&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;check select&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/check.md&quot;,&quot;filename&quot;:&quot;check&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-check&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/demo/multiple.md&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;id&quot;:&quot;components-tree-select-demo-multiple&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/tree-select/demo/multiple.md&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多选&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多选。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/demo/multiple.md&quot;,&quot;filename&quot;:&quot;multiple&quot;,&quot;directory&quot;:&quot;components/tree-select/demo&quot;,&quot;id&quot;:&quot;components-tree-select-demo-multiple&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/tree-select/index.md&quot;:{&quot;title&quot;:&quot;TreeSelect&quot;,&quot;id&quot;:&quot;components-tree-select-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;biangang.bg&quot;},&quot;filepath&quot;:&quot;site/components/tree-select/index.md&quot;,&quot;directory&quot;:&quot;components/tree-select&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;TreeSelect&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;树选择&quot;,&quot;order&quot;:&quot;2&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/tree-select/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/tree-select&quot;,&quot;id&quot;:&quot;components-tree-select-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#何时使用\&quot;&gt;何时使用&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#treeselect-props\&quot;&gt;TreeSelect props&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#treenode-props\&quot;&gt;TreeNode props&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/uploader/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;id&quot;:&quot;components-uploader-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本用法&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;基本用法。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/image-visual.md&quot;:{&quot;title&quot;:&quot;图片可视化上传&quot;,&quot;id&quot;:&quot;components-uploader-demo-image-visual&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/image-visual.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;image-visual&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图片可视化上传&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过 isVisual 参数控制展示方式&lt;br&gt;通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式&lt;a href=\&quot;https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\&quot;&gt;见此&lt;/a&gt;&lt;br&gt;注意：&lt;a href=\&quot;http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\&quot;&gt;配置过多的 accept 会导致 chrome 下打开文件对话框缓慢&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/image-visual.md&quot;,&quot;filename&quot;:&quot;image-visual&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-image-visual&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/image.md&quot;:{&quot;title&quot;:&quot;图片上传&quot;,&quot;id&quot;:&quot;components-uploader-demo-image&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/image.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;image&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;图片上传&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过修改 accept 可以指定可以上传的图片类型，accept 的使用方式&lt;a href=\&quot;https://github.com/uxcore/uploadcore/blob/master/README.md#options-配置\&quot;&gt;见此&lt;/a&gt;&lt;br&gt;注意：&lt;a href=\&quot;http://stackoverflow.com/questions/39187857/inputfile-accept-image-open-dialog-so-slow-with-chrome\&quot;&gt;配置过多的 accept 会导致 chrome 下打开文件对话框缓慢&lt;/a&gt;&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/image.md&quot;,&quot;filename&quot;:&quot;image&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-image&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/multi.md&quot;:{&quot;title&quot;:&quot;多文件&quot;,&quot;id&quot;:&quot;components-uploader-demo-multi&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/multi.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;multi&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;多文件&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;多文件。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/multi.md&quot;,&quot;filename&quot;:&quot;multi&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-multi&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/readonly.md&quot;:{&quot;title&quot;:&quot;查看态&quot;,&quot;id&quot;:&quot;components-uploader-demo-readonly&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/readonly.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;readonly&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;查看态&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/readonly.md&quot;,&quot;filename&quot;:&quot;readonly&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-readonly&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/tips.md&quot;:{&quot;title&quot;:&quot;附带提示文字&quot;,&quot;id&quot;:&quot;components-uploader-demo-tips&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/tips.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;tips&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;附带提示文字&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;附带提示文字。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/tips.md&quot;,&quot;filename&quot;:&quot;tips&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-tips&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/demo/wrap1.md&quot;:{&quot;title&quot;:&quot;自定义上传区域&quot;,&quot;id&quot;:&quot;components-uploader-demo-wrap1&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/uploader/demo/wrap1.md&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;filename&quot;:&quot;wrap1&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义上传区域&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;自定义上传区域。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/uploader/demo/wrap1.md&quot;,&quot;filename&quot;:&quot;wrap1&quot;,&quot;directory&quot;:&quot;components/uploader/demo&quot;,&quot;id&quot;:&quot;components-uploader-demo-wrap1&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/uploader/index.md&quot;:{&quot;title&quot;:&quot;Uploader&quot;,&quot;id&quot;:&quot;components-uploader-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;onbing&quot;},&quot;filepath&quot;:&quot;site/components/uploader/index.md&quot;,&quot;directory&quot;:&quot;components/uploader&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Uploader&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;文件上传&quot;,&quot;order&quot;:&quot;14&quot;,&quot;subtype&quot;:&quot;Form Control&quot;,&quot;filepath&quot;:&quot;site/components/uploader/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/uploader&quot;,&quot;id&quot;:&quot;components-uploader-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#api\&quot;&gt;API&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#reset\&quot;&gt;reset()&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#props\&quot;&gt;Props&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#filelist-的最小格式-格式稍显麻烦，是为了-onchange-的返回值可以传回给-filelist\&quot;&gt;fileList 的最小格式 (格式稍显麻烦，是为了 onChange 的返回值可以传回给 fileList)&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#events\&quot;&gt;Events&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#onchange-的-filelist-的枚举格式有如下几种\&quot;&gt;onChange 的 fileList 的枚举格式有如下几种&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#other-events\&quot;&gt;Other Events&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/components/user-guide/demo/basic.md&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;id&quot;:&quot;components-user-guide-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/user-guide/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/user-guide/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;新功能引导&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/user-guide/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/user-guide/demo&quot;,&quot;id&quot;:&quot;components-user-guide-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/components/user-guide/index.md&quot;:{&quot;title&quot;:&quot;UserGuide&quot;,&quot;id&quot;:&quot;components-user-guide-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;buzhou&quot;},&quot;filepath&quot;:&quot;site/components/user-guide/index.md&quot;,&quot;directory&quot;:&quot;components/user-guide&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;UserGuide&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;chinese&quot;:&quot;用户引导&quot;,&quot;subtype&quot;:&quot;Presentation&quot;,&quot;filepath&quot;:&quot;site/components/user-guide/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/user-guide&quot;,&quot;id&quot;:&quot;components-user-guide-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/components/validator/index.md&quot;:{&quot;title&quot;:&quot;Validator&quot;,&quot;id&quot;:&quot;components-validator-index&quot;,&quot;tags&quot;:{&quot;author&quot;:&quot;eternalsky&quot;},&quot;filepath&quot;:&quot;site/components/validator/index.md&quot;,&quot;directory&quot;:&quot;components/validator&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Validator&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;category&quot;:&quot;Components&quot;,&quot;subtype&quot;:&quot;Tool&quot;,&quot;chinese&quot;:&quot;基础校验&quot;,&quot;filepath&quot;:&quot;site/components/validator/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;components/validator&quot;,&quot;id&quot;:&quot;components-validator-index&quot;,&quot;template&quot;:&quot;components&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#usage\&quot;&gt;Usage&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/base/index.md&quot;:{&quot;title&quot;:&quot;Base&quot;,&quot;id&quot;:&quot;css-base-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/base/index.md&quot;,&quot;directory&quot;:&quot;css/base&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Base&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;基础样式&quot;,&quot;filepath&quot;:&quot;site/css/base/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/base&quot;,&quot;id&quot;:&quot;css-base-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#字体\&quot;&gt;字体&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#链接\&quot;&gt;链接&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#常用的全局属性列表\&quot;&gt;常用的全局属性列表&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#清除浮动类\&quot;&gt;清除浮动类&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#加载指示器\&quot;&gt;加载指示器&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/button/index.md&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;id&quot;:&quot;css-button-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/button/index.md&quot;,&quot;directory&quot;:&quot;css/button&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Button&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;按钮&quot;,&quot;filepath&quot;:&quot;site/css/button/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/button&quot;,&quot;id&quot;:&quot;css-button-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#按钮\&quot;&gt;按钮&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#预定义按钮\&quot;&gt;预定义按钮&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按钮尺寸\&quot;&gt;按钮尺寸&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按钮组\&quot;&gt;按钮组&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/css/checkbox/index.md&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;id&quot;:&quot;css-checkbox-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/checkbox/index.md&quot;,&quot;directory&quot;:&quot;css/checkbox&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Checkbox&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;单/复选框&quot;,&quot;filepath&quot;:&quot;site/css/checkbox/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/checkbox&quot;,&quot;id&quot;:&quot;css-checkbox-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#单、复选框\&quot;&gt;单、复选框&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/filter/index.md&quot;:{&quot;title&quot;:&quot;Filter&quot;,&quot;id&quot;:&quot;css-filter-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/filter/index.md&quot;,&quot;directory&quot;:&quot;css/filter&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Filter&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;筛选&quot;,&quot;filepath&quot;:&quot;site/css/filter/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/filter&quot;,&quot;id&quot;:&quot;css-filter-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#筛选\&quot;&gt;筛选&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&quot;},&quot;site/css/layout/index.md&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;id&quot;:&quot;css-layout-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/css/layout/index.md&quot;,&quot;directory&quot;:&quot;css/layout&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Layout&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;CSS&quot;,&quot;chinese&quot;:&quot;布局&quot;,&quot;filepath&quot;:&quot;site/css/layout/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;css/layout&quot;,&quot;id&quot;:&quot;css-layout-index&quot;,&quot;template&quot;:&quot;css&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#基本布局\&quot;&gt;基本布局&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#栅格布局\&quot;&gt;栅格布局&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#example-stacked-to-horizontal\&quot;&gt;example: Stacked-to-horizontal&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/home.md&quot;:{&quot;title&quot;:&quot;UXCORE&quot;,&quot;id&quot;:&quot;-home&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/home.md&quot;,&quot;directory&quot;:&quot;&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;UXCORE&quot;,&quot;description&quot;:&quot;&lt;h1 id=\&quot;uxcore\&quot;&gt;UXCORE&lt;/h1&gt;\n&quot;,&quot;filepath&quot;:&quot;site/home.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;&quot;,&quot;id&quot;:&quot;-home&quot;,&quot;template&quot;:&quot;home&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/demo/basic.md&quot;:{&quot;title&quot;:&quot;区块信息展示&quot;,&quot;id&quot;:&quot;scene-card-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;区块信息展示&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/card/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;id&quot;:&quot;scene-card-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/demo/draggable.md&quot;:{&quot;title&quot;:&quot;区块信息展示(可拖动)&quot;,&quot;id&quot;:&quot;scene-card-demo-draggable&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/demo/draggable.md&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;filename&quot;:&quot;draggable&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;区块信息展示(可拖动)&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/card/demo/draggable.md&quot;,&quot;filename&quot;:&quot;draggable&quot;,&quot;directory&quot;:&quot;scene/card/demo&quot;,&quot;id&quot;:&quot;scene-card-demo-draggable&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/card/index.md&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;id&quot;:&quot;scene-card-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/card/index.md&quot;,&quot;directory&quot;:&quot;scene/card&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Card&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;区块信息&quot;,&quot;filepath&quot;:&quot;site/scene/card/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/card&quot;,&quot;id&quot;:&quot;scene-card-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/basic.md&quot;:{&quot;title&quot;:&quot;表单联动&quot;,&quot;id&quot;:&quot;scene-commonform-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单联动&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/decoration.md&quot;:{&quot;title&quot;:&quot;表单的扩展3 -- 一些表单装饰物的使用&quot;,&quot;id&quot;:&quot;scene-commonform-demo-decoration&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/decoration.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;decoration&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展3 -- 一些表单装饰物的使用&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;在表单中，一些不需要表单交互的模块，我们称之为装饰物，例如按钮、观看用的表格等等，&lt;br&gt;这个场景演示了如何在 Form 中自定义地定义装饰物的。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/decoration.md&quot;,&quot;filename&quot;:&quot;decoration&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-decoration&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/defineField.md&quot;:{&quot;title&quot;:&quot;表单的扩展1 -- 自定义一个 FormField&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefield&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineField.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;defineField&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展1 -- 自定义一个 FormField&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过继承 Form.FormField，用户可以自己定义特制的 FormField，以满足各种业务上的需求。&lt;br&gt; 定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineField.md&quot;,&quot;filename&quot;:&quot;defineField&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefield&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;:{&quot;title&quot;:&quot;表单的扩展2 -- 使用 API 自定义一个 FormField&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefieldapi&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;filename&quot;:&quot;defineFieldApi&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;表单的扩展2 -- 使用 API 自定义一个 FormField&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过继承 Form.createFormField API，用户可以快速地将自己的业务组件封装成 FormField，以满足各种业务上的需求。&lt;br&gt;定制的 FormField 同样可以使用 Form 带来通用配置，如布局、样式、校验、值的管理等等。&lt;br&gt;可以与上面的例子进行一个对比，感受一下之间的不同性，这种方式没有扩展 FormField 的方式定制，但相比较起来封装更加简单。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/demo/defineFieldApi.md&quot;,&quot;filename&quot;:&quot;defineFieldApi&quot;,&quot;directory&quot;:&quot;scene/commonForm/demo&quot;,&quot;id&quot;:&quot;scene-commonform-demo-definefieldapi&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/commonForm/index.md&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;id&quot;:&quot;scene-commonform-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/commonForm/index.md&quot;,&quot;directory&quot;:&quot;scene/commonForm&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Form&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;tableform&quot;,&quot;subtype&quot;:&quot;表格表单&quot;,&quot;chinese&quot;:&quot;表单相关&quot;,&quot;filepath&quot;:&quot;site/scene/commonForm/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/commonForm&quot;,&quot;id&quot;:&quot;scene-commonform-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/crud/demo/basic.md&quot;:{&quot;title&quot;:&quot;增删改查&quot;,&quot;id&quot;:&quot;scene-crud-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/crud/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/crud/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;增删改查&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/crud/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/crud/demo&quot;,&quot;id&quot;:&quot;scene-crud-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/crud/index.md&quot;:{&quot;title&quot;:&quot;CRUD&quot;,&quot;id&quot;:&quot;scene-crud-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/crud/index.md&quot;,&quot;directory&quot;:&quot;scene/crud&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;CRUD&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;增删改查&quot;,&quot;filepath&quot;:&quot;site/scene/crud/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/crud&quot;,&quot;id&quot;:&quot;scene-crud-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/basic.md&quot;:{&quot;title&quot;:&quot;自定义列的渲染方式&quot;,&quot;id&quot;:&quot;scene-customtable-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义列的渲染方式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;原本数据为 小李、小王，在展示前，通过 column 的 render 函数来自定义列的渲染。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/custom-edit.md&quot;:{&quot;title&quot;:&quot;定制编辑&quot;,&quot;id&quot;:&quot;scene-customtable-demo-custom-edit&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/custom-edit.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;custom-edit&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;定制编辑&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;这个 Demo 展示了如何定制一个行内编辑 Cell，以应对各种各样的业务需求。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/custom-edit.md&quot;,&quot;filename&quot;:&quot;custom-edit&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-custom-edit&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/demo/row.md&quot;:{&quot;title&quot;:&quot;自定义行的渲染方式&quot;,&quot;id&quot;:&quot;scene-customtable-demo-row&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/demo/row.md&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;filename&quot;:&quot;row&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;自定义行的渲染方式&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;通过判断 rowData，可以给指定的行加上独特的 className&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/demo/row.md&quot;,&quot;filename&quot;:&quot;row&quot;,&quot;directory&quot;:&quot;scene/customTable/demo&quot;,&quot;id&quot;:&quot;scene-customtable-demo-row&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/customTable/index.md&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;id&quot;:&quot;scene-customtable-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/customTable/index.md&quot;,&quot;directory&quot;:&quot;scene/customTable&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Table&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;tableform&quot;,&quot;subtype&quot;:&quot;表格表单&quot;,&quot;chinese&quot;:&quot;表格定制&quot;,&quot;filepath&quot;:&quot;site/scene/customTable/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/customTable&quot;,&quot;id&quot;:&quot;scene-customtable-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/demo/basic.md&quot;:{&quot;title&quot;:&quot;缺省页&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basic.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;缺省页&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击查看代码&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/demo/basicButton.md&quot;:{&quot;title&quot;:&quot;缺省页 (带按钮)&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basicbutton&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basicButton.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;filename&quot;:&quot;basicButton&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;缺省页 (带按钮)&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;点击查看代码&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;1&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/demo/basicButton.md&quot;,&quot;filename&quot;:&quot;basicButton&quot;,&quot;directory&quot;:&quot;scene/defaultPage/demo&quot;,&quot;id&quot;:&quot;scene-defaultpage-demo-basicbutton&quot;,&quot;template&quot;:&quot;demos&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/scene/defaultPage/index.md&quot;:{&quot;title&quot;:&quot;DefaultPage&quot;,&quot;id&quot;:&quot;scene-defaultpage-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/scene/defaultPage/index.md&quot;,&quot;directory&quot;:&quot;scene/defaultPage&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;DefaultPage&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;common&quot;,&quot;subtype&quot;:&quot;站点常用&quot;,&quot;chinese&quot;:&quot;缺省页&quot;,&quot;filepath&quot;:&quot;site/scene/defaultPage/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;scene/defaultPage&quot;,&quot;id&quot;:&quot;scene-defaultpage-index&quot;,&quot;template&quot;:&quot;scene&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},&quot;site/start/base/index.md&quot;:{&quot;title&quot;:null,&quot;id&quot;:&quot;start-base-index&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/start/base/index.md&quot;,&quot;directory&quot;:&quot;start/base&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;meta&quot;:{&quot;title&quot;:null,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;category&quot;:&quot;START&quot;,&quot;chinese&quot;:&quot;开始使用&quot;,&quot;filepath&quot;:&quot;site/start/base/index.md&quot;,&quot;filename&quot;:&quot;index&quot;,&quot;directory&quot;:&quot;start/base&quot;,&quot;id&quot;:&quot;start-base-index&quot;,&quot;template&quot;:&quot;start&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#uxcore\&quot;&gt;&lt;a href=\&quot;http://uxco.re/\&quot;&gt;UXCore&lt;/a&gt;&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#安装\&quot;&gt;安装&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#使用\&quot;&gt;使用&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=\&quot;#引入-js\&quot;&gt;引入 js&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#按需引入-js\&quot;&gt;按需引入 js&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#引入样式包\&quot;&gt;引入样式包&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#react-兼容性\&quot;&gt;React 兼容性&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#\b浏览器支持\&quot;&gt;\b浏览器支持&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#项目共建\&quot;&gt;项目共建&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=\&quot;#许可\&quot;&gt;许可&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ul&gt;&quot;},&quot;site/theme/builder.md&quot;:{&quot;title&quot;:&quot;theme builder&quot;,&quot;id&quot;:&quot;theme-builder&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/theme/builder.md&quot;,&quot;directory&quot;:&quot;theme&quot;,&quot;filename&quot;:&quot;builder&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;theme builder&quot;,&quot;description&quot;:&quot;&lt;h1 id=\&quot;theme-builder\&quot;&gt;theme builder&lt;/h1&gt;\n&quot;,&quot;filepath&quot;:&quot;site/theme/builder.md&quot;,&quot;filename&quot;:&quot;builder&quot;,&quot;directory&quot;:&quot;theme&quot;,&quot;id&quot;:&quot;theme-builder&quot;,&quot;template&quot;:&quot;builder&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;}}</div><img id="J_ThemeSelector" src="/static/iconfont-yifuhuanfu.png" class="theme-selector"><div id="J_ThemePickerBox" class="theme-picker-box"></div></nav><div id="J-main" class="kuma-layout-full site-main"><aside class="site-aside"><h3 class="category-name">Presentation</h3><ul><li><a href="/components/album">Album<small>相册</small></a></li><li><a href="/components/alert">Alert<small>警告提示</small></a></li><li><a href="/components/animate">Animate<small>动画</small></a></li><li><a href="/components/badge">Badge<small>徽标</small></a></li><li><a href="/components/card">Card<small>卡片</small></a></li><li><a href="/components/carousel">Carousel<small>轮播</small></a></li><li><a href="/components/dialog">Dialog<small>对话框</small></a></li><li><a href="/components/drawer">Drawer<small>抽屉</small></a></li><li><a href="/components/dropdown">Dropdown<small>下拉菜单</small></a></li><li><a href="/components/empty-data">EmptyData<small>空数据</small></a></li><li><a href="/components/icon">Icon<small>图标</small></a></li><li><a href="/components/image">Image<small>图片</small></a></li><li><a href="/components/load-more">LoadMore<small>加载更多</small></a></li><li><a href="/components/message">Message<small>全局提醒</small></a></li><li><a href="/components/notice-icon">NoticeIcon<small>通知图标</small></a></li><li><a href="/components/popover">Popover<small>弹窗</small></a></li><li><a href="/components/progress">Progress<small>进度条</small></a></li><li><a href="/components/steps">Steps<small>步骤条</small></a></li><li><a href="/components/tag">Tag<small>标签</small></a></li><li><a href="/components/timeline">Timeline<small>时间轴</small></a></li><li><a href="/components/title">Title<small>标题</small></a></li><li><a href="/components/tooltip">Tooltip<small>文字提示</small></a></li><li><a href="/components/user-guide">UserGuide<small>用户引导</small></a></li></ul><h3 class="category-name">Form Control</h3><ul><li><a href="/components/button">Button<small>按钮</small></a></li><li><a href="/components/button-group">ButtonGroup<small>按钮组</small></a></li><li><a href="/components/calendar">Calendar<small>日期选择框</small></a></li><li><a href="/components/cascade-multi-select">CasMultiSelect<small>级联多选</small></a></li><li><a href="/components/cascade-select">CascadeSelect<small>级联选择</small></a></li><li><a href="/components/checkbox-group">Checkbox<small>复选按钮组</small></a></li><li><a href="/components/form">Form<small>表单</small></a></li><li><a href="/components/mention">Mention<small>At组件</small></a></li><li><a href="/components/multi-select">MultiSelect<small>复选择器</small></a></li><li><a href="/components/pickable">Pickable<small>筛选器</small></a></li><li><a href="/components/radiogroup">RadioGroup<small>单选按钮组</small></a></li><li><a href="/components/rate">Rate<small>评分</small></a></li><li><a href="/components/select2">Select2<small>选择器</small></a></li><li><a href="/components/switch">Switch<small>开关</small></a></li><li><a href="/components/time-picker">TimePicker<small>时间选择器</small></a></li><li><a href="/components/tinymce">Tinymce<small>富文本</small></a></li><li><a href="/components/transfer">Transfer<small>双栏选择框</small></a></li><li><a href="/components/tree-select">TreeSelect<small>树选择</small></a></li><li><a href="/components/uploader">Uploader<small>文件上传</small></a></li></ul><h3 class="category-name">Navigation</h3><ul><li><a href="/components/collapse">Collapse<small>折叠面板</small></a></li><li><a href="/components/crumb">Crumb<small>面包屑</small></a></li><li><a href="/components/float-nav">FloatNav<small>悬浮导航</small></a></li><li><a href="/components/menu">Menu<small>导航菜单</small></a></li><li><a href="/components/pagination">Pagination<small>分页</small></a></li><li><a href="/components/tabs">Tabs<small>选项卡</small></a></li><li><a href="/components/totop">Totop<small>返回顶部</small></a></li><li><a href="/components/tree">Tree<small>树形控件</small></a></li></ul><h3 class="category-name">Tool</h3><ul><li><a href="/components/formatter">Formatter<small>格式化</small></a></li><li><a href="/components/validator">Validator<small>基础校验</small></a></li></ul><h3 class="category-name">Layout</h3><ul><li><a href="/components/grid">Grid<small>栅格</small></a></li><li><a href="/components/layout">Layout<small>左右布局</small></a></li></ul><h3 class="category-name">Matrix</h3><ul><li><a href="/components/matrix">Matrix<small>数据矩阵</small></a></li><li class="current"><a href="/components/table">Table<small>表格</small></a></li></ul></aside><article class="site-content"><h2 class="site-demos"> <i class="kuma-icon kuma-icon-yingyong"></i>组件演示</h2><div id="J_Demos" class="site-demos-schema">[{&quot;title&quot;:&quot;基本表格&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;基本表格&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/basic.md&quot;,&quot;filename&quot;:&quot;basic&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-basic&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n      var fetchUrl = '/components/table/demo/data.json';\n\n      var renderProps = {\n        height: 400,\n        actionColumn: {\n          edit: function edit() {},\n          del: function del() {}\n        },\n        className: 'kuma-uxtable-split-line',\n        fetchParams: {},\n        showColumnPicker: false,\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns\n      };\n      return React.createElement(_uxcore.Table, renderProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-basic'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      actionColumn: {\n        edit() {},\n        del() {},\n      },\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      fetchParams: {},\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      fetchUrl,\n      jsxcolumns: columns,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-basic'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;风格&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;风格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;有三种风格可控选择：分割线、线框和斑马纹。&lt;br&gt;有两种尺寸可以选择：small &amp;amp; middle&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;0&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/style.md&quot;,&quot;filename&quot;:&quot;style&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-style&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar RadioGroupFormField = _uxcore.Form.RadioGroupFormField;\nvar Item = RadioGroupFormField.Item;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      value: {\n        style: 'split',\n        size: 'middle'\n      }\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var classNameMap = {\n        split: 'kuma-uxtable-split-line',\n        border: 'kuma-uxtable-border-line'\n      };\n\n      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n      var fetchUrl = '/components/table/demo/data.json';\n\n      var renderProps = {\n        height: 400,\n        size: this.state.value.size,\n        className: classNameMap[this.state.value.style],\n        showColumnPicker: false,\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns\n      };\n\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(\n          _uxcore.Form,\n          { jsxvalues: this.state.value, jsxonChange: function jsxonChange(value) {\n              _this2.setState({ value: value });\n            } },\n          React.createElement(\n            RadioGroupFormField,\n            { jsxlabel: '\\u98CE\\u683C', jsxname: 'style' },\n            React.createElement(Item, { value: 'split', text: '\\u5206\\u5272\\u7EBF' }),\n            React.createElement(Item, { value: 'border', text: '\\u7EBF\\u6846' }),\n            React.createElement(Item, { value: 'zebra', text: '\\u7EBF\\u6591\\u9A6C\\u7EB9\\u6846' })\n          ),\n          React.createElement(\n            RadioGroupFormField,\n            { jsxlabel: '\\u5C3A\\u5BF8', jsxname: 'size' },\n            React.createElement(Item, { value: 'small', text: '\\u5C0F\\u578B' }),\n            React.createElement(Item, { value: 'middle', text: '\\u666E\\u901A' })\n          )\n        ),\n        React.createElement(_uxcore.Table, renderProps)\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-style'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; { RadioGroupFormField } = Form;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; { Item } = RadioGroupFormField;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      value: {\n        style: &lt;span class=\&quot;hljs-string\&quot;&gt;'split'&lt;/span&gt;,\n        size: &lt;span class=\&quot;hljs-string\&quot;&gt;'middle'&lt;/span&gt;,\n      },\n    };\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; classNameMap = {\n      split: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      border: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-border-line'&lt;/span&gt;,\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      size: &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.value.size,\n      className: classNameMap[&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.value.style],\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      fetchUrl,\n      jsxcolumns: columns,\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxvalues&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{this.state.value}&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxonChange&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(value)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.setState({ value }); }}&amp;gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;风格\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;style\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Item&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;split\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;分割线\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Item&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;border\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;线框\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Item&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;zebra\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;线斑马纹框\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;尺寸\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;size\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Item&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;small\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;小型\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Item&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;middle\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;普通\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-style'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;高级表格 (操作栏 + 自定义列 + 分页)&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/adv.md&quot;,&quot;filename&quot;:&quot;adv&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-adv&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var me = this;\n      // 通过 rowSelection 对象表明需要行选择\n      var rowSelection = {\n        onSelect: function onSelect(record, selected, selectedRows) {\n          console.log(record, selected, selectedRows);\n        },\n        onSelectAll: function onSelectAll(selected, selectedRows) {\n          console.log(selected, selectedRows);\n        }\n      };\n\n      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];\n\n      var fetchUrl = '/components/table/demo/data.json';\n\n      var renderProps = {\n        height: 400,\n        actionBar: [{\n          title: '工具条',\n          callback: function callback() {\n            alert('工具条');\n          }\n        }],\n        className: 'kuma-uxtable-split-line',\n        showSearch: true,\n        fetchParams: {},\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns,\n        rowSelection: rowSelection\n      };\n      return React.createElement(_uxcore.Table, renderProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-adv'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-comment\&quot;&gt;// 通过 rowSelection 对象表明需要行选择&lt;/span&gt;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; rowSelection = {\n      onSelect(record, selected, selectedRows) {\n        &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(record, selected, selectedRows);\n      },\n      onSelectAll(selected, selectedRows) {\n        &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(selected, selectedRows);\n      },\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      actionBar: [\n        {\n          title: &lt;span class=\&quot;hljs-string\&quot;&gt;'工具条'&lt;/span&gt;,\n          callback: () =&amp;gt; {\n            alert(&lt;span class=\&quot;hljs-string\&quot;&gt;'工具条'&lt;/span&gt;);\n          },\n        }\n      ],\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      showSearch: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      fetchParams: {},\n      fetchUrl,\n      jsxcolumns: columns,\n      rowSelection,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-adv'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;百分比布局 + 可调整列宽&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;表格的列按照百分比布局，同时支持和列固定的组合。拖动屏幕边缘，调整表格整体宽度试一试~&lt;/p&gt;\n&lt;p&gt;列标题处支持拖拽调整列宽。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;2&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/percent.md&quot;,&quot;filename&quot;:&quot;percent&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-percent&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var columns = [{ dataKey: 'country', title: '国家', width: '30%', ordered: true }, { dataKey: 'city', title: '城市', width: '20%', ordered: true }, { dataKey: 'firstName', title: 'FristName', width: '15%' }, { dataKey: 'lastName', title: 'LastName', width: '20%' }, { dataKey: 'email', title: 'Email', width: '15%', ordered: true }];\n\n      var fetchUrl = '/components/table/demo/data.json';\n\n      var renderProps = {\n        height: 400,\n        actionColumn: {\n          edit: function edit() {},\n          del: function del() {}\n        },\n        columnResizeable: true,\n        className: 'kuma-uxtable-border-line',\n        fetchParams: {},\n        showColumnPicker: false,\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns\n      };\n      return React.createElement(_uxcore.Table, renderProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-percent'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'30%'&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'15%'&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'15%'&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      actionColumn: {\n        edit() {},\n        del() {},\n      },\n      columnResizeable: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-border-line'&lt;/span&gt;,\n      fetchParams: {},\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      fetchUrl,\n      jsxcolumns: columns,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-percent'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;Tree 表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;树形表格，数据格式参考：http://uxco.re/components/table/demo/data.json&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;3&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/tree.md&quot;,&quot;filename&quot;:&quot;tree&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-tree&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var columns = [{\n        dataKey: 'country',\n        title: '国家国家国家国家',\n        width: 200\n      }, {\n        dataKey: 'city',\n        title: '城市',\n        width: 200\n      }, {\n        dataKey: 'firstName',\n        title: 'FristName',\n        width: 200\n\n      }, {\n        dataKey: 'lastName',\n        title: 'LastName',\n        width: 200,\n        order: true\n      }, {\n        title: '操作',\n        type: 'action',\n        rightFixed: true,\n        width: '300px',\n        collapseNum: 5,\n        actions: [{\n          title: '新增子行',\n          callback: function callback(rowData) {\n            _this2.table.addSubRowFromTop({\n              \&quot;country\&quot;: '\\u4E2D\\u56FD',\n              \&quot;city\&quot;: \&quot;杭州\&quot;,\n              \&quot;firstName\&quot;: 'FirstName_' + setTimeout(0),\n              \&quot;lastName\&quot;: \&quot;LastName\&quot;\n            }, rowData, function () {\n              console.log(_this2.table.getData());\n            });\n          }\n        }, {\n          title: '删除',\n          callback: function callback(rowData) {\n            _this2.table.delRow(rowData);\n          }\n        }]\n      }];\n\n      var renderProps = {\n        height: 400,\n        // width: 800,\n        showSearch: true,\n        expandIconType: 'adderSubtractor',\n        fetchUrl: '/components/table/demo/data.json',\n        jsxcolumns: columns,\n        renderModel: 'tree',\n        rowSelection: {\n          onSelect: function onSelect(checked, selectedRow, selectedRows) {\n            console.log('selectedRows:', selectedRows);\n          },\n          onSelectAll: function onSelectAll() {}\n        }\n      };\n      return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {\n          _this2.table = c;\n        } }));\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-tree'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; classnames &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'classnames'&lt;/span&gt;;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家国家国家国家'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        order: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      },\n      {\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作'&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'action'&lt;/span&gt;,\n        rightFixed: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-string\&quot;&gt;'300px'&lt;/span&gt;,\n        collapseNum: &lt;span class=\&quot;hljs-number\&quot;&gt;5&lt;/span&gt;,\n        actions: [\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'新增子行'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.table.addSubRowFromTop({\n                &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;country\&quot;&lt;/span&gt;: &lt;span class=\&quot;hljs-string\&quot;&gt;`中国`&lt;/span&gt;,\n                &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;city\&quot;&lt;/span&gt;: &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;杭州\&quot;&lt;/span&gt;,\n                &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;firstName\&quot;&lt;/span&gt;: &lt;span class=\&quot;hljs-string\&quot;&gt;`FirstName_&lt;span class=\&quot;hljs-subst\&quot;&gt;${setTimeout(0)}&lt;/span&gt;`&lt;/span&gt;,\n                &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;lastName\&quot;&lt;/span&gt;: &lt;span class=\&quot;hljs-string\&quot;&gt;\&quot;LastName\&quot;&lt;/span&gt;,\n              }, rowData, () =&amp;gt; {\n                &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.table.getData())\n              })\n            }\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'删除'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.table.delRow(rowData);\n            },\n          }\n        ],\n      },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// width: 800,&lt;/span&gt;\n      showSearch: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      expandIconType: &lt;span class=\&quot;hljs-string\&quot;&gt;'adderSubtractor'&lt;/span&gt;,\n      fetchUrl: &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;,\n      jsxcolumns: columns,\n      renderModel: &lt;span class=\&quot;hljs-string\&quot;&gt;'tree'&lt;/span&gt;,\n      rowSelection: {\n        onSelect: (checked, selectedRow, selectedRows) =&amp;gt; {\n          &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-string\&quot;&gt;'selectedRows:'&lt;/span&gt;, selectedRows);\n        },\n        onSelectAll: () =&amp;gt; {},\n      },\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; {this.table = c}} /&amp;gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-tree'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;列筛选&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列筛选&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/filter.md&quot;,&quot;filename&quot;:&quot;filter&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-filter&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var columns = [{ dataKey: 'country', title: '国家', width: 200,\n        filters: [{\n          text: 'Joe',\n          value: 'Joe'\n        }, {\n          text: 'Jim',\n          value: 'Jim'\n        }, {\n          text: 'Submenu',\n          value: 'Submenu',\n          children: [{\n            text: 'Green',\n            value: 'Green'\n          }, {\n            text: 'Black',\n            value: 'Black'\n          }]\n        }]\n      }, { dataKey: 'city', title: '城市', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200 }];\n\n      var fetchUrl = '/components/table/demo/data.json';\n\n      var renderProps = {\n        height: 400,\n        className: 'kuma-uxtable-split-line',\n        showColumnPicker: false,\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns\n      };\n      return React.createElement(_uxcore.Table, renderProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-filter'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, \n        filters: [{\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'Joe'&lt;/span&gt;,\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'Joe'&lt;/span&gt;,\n        }, {\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'Jim'&lt;/span&gt;,\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'Jim'&lt;/span&gt;,\n        }, {\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'Submenu'&lt;/span&gt;,\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'Submenu'&lt;/span&gt;,\n          children: [{\n            text: &lt;span class=\&quot;hljs-string\&quot;&gt;'Green'&lt;/span&gt;,\n            value: &lt;span class=\&quot;hljs-string\&quot;&gt;'Green'&lt;/span&gt;,\n          }, {\n            text: &lt;span class=\&quot;hljs-string\&quot;&gt;'Black'&lt;/span&gt;,\n            value: &lt;span class=\&quot;hljs-string\&quot;&gt;'Black'&lt;/span&gt;,\n          }],\n        }],\n      },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;;\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      fetchUrl,\n      jsxcolumns: columns,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-filter'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行内编辑表格&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;行内编辑表格，除了内置的几种可编辑列之外，我们还提供了自定义可编辑列的方法，请点击相应 &lt;a href=\&quot;/scene/customTable/#code-box-scene-customtable-demo-custom-edit\&quot;&gt;场景&lt;/a&gt; 查看&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;4&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/edit.md&quot;,&quot;filename&quot;:&quot;edit&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-edit&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\nvar Option = _uxcore.Select.Option;\n\nvar RadioItem = _uxcore.RadioGroup.Item;\nvar Constants = _uxcore.Table.Constants;\n\nvar mockData = {\n  data: [{\n    email: 'xw@abc.com',\n    nameId: 'xiaowang',\n    name: '小王',\n    cityId: 'bj',\n    city: '北京'\n  }, {\n    email: 'xl@abc.com',\n    nameId: 'xiaoli',\n    name: '小李',\n    cityId: 'hz',\n    city: '杭州'\n  }]\n};\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      data: mockData,\n      showOtherColumn: false\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'getTableValues',\n    value: function getTableValues() {\n      console.log(this.table.getData());\n    }\n  }, {\n    key: 'handleTableChange',\n    value: function handleTableChange(data, dataKey, pass) {\n      console.log(data.data);\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var columns = [{ dataKey: 'jsxid', title: 'jsxid', width: 80 }, { dataKey: 'city',\n        editKey: 'cityId',\n        title: '城市',\n        width: 200,\n        type: 'select',\n        renderChildren: function renderChildren() {\n          return [{ id: 'bj', name: '北京' }, { id: 'hz', name: '杭州' }].map(function (item) {\n            return React.createElement(\n              Option,\n              { key: item.id },\n              item.name\n            );\n          });\n        },\n        config: { filterOption: false } }, { dataKey: 'name',\n        editKey: 'nameId',\n        title: '姓名',\n        width: 200,\n        type: 'radio',\n        renderChildren: function renderChildren() {\n          return [{ id: 'xiaoli', name: '小李' }, { id: 'xiaowang', name: '小王' }].map(function (item) {\n            return React.createElement(RadioItem, { key: item.id, text: item.name, value: item.id });\n          });\n        } }, {\n        dataKey: 'email',\n        title: 'Email',\n        width: 200,\n        type: 'text',\n        required: true,\n        rules: function rules(cellData) {\n          if (cellData.length === 0) {\n            return '不能为空';\n          }\n          if (!_uxcore.Validator.isEmail(cellData)) {\n            return '必须是一个合法的邮件地址';\n          }\n          return true;\n        }\n      }, { dataKey: 'action1',\n        title: '操作1',\n        width: 200,\n        type: 'action',\n        actions: [{\n          title: '编辑',\n          callback: function callback(rowData) {\n            me.table.editRow(rowData);\n          },\n          mode: Constants.MODE.VIEW\n        }, {\n          title: '保存',\n          callback: function callback(rowData) {\n            me.table.saveRow(rowData);\n          },\n          mode: Constants.MODE.EDIT\n        }, {\n          title: '删除',\n          callback: function callback(rowData) {\n            me.table.delRow(rowData);\n          },\n          mode: Constants.MODE.VIEW\n        }, {\n          title: '重置',\n          callback: function callback(rowData) {\n            me.table.resetRow(rowData);\n          },\n          mode: Constants.MODE.EDIT\n        }]\n      }];\n\n      var renderProps = {\n        showPager: false,\n        fetchParams: {},\n        jsxdata: me.state.data,\n        className: 'kuma-uxtable-split-line',\n        actionBar: {\n          新增行: function _() {\n            me.table.addEmptyRow();\n          }\n        },\n        jsxcolumns: columns,\n        processData: function processData(data) {\n          return data;\n        },\n        onChange: me.handleTableChange\n      };\n\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {\n            _this2.table = c;\n          } })),\n        React.createElement(\n          _uxcore.Button,\n          { onClick: me.getTableValues.bind(me), style: { marginTop: '12px' } },\n          '\\u83B7\\u53D6 Table \\u7684\\u503C'\n        )\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-edit'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; classnames &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'classnames'&lt;/span&gt;;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Validator } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Select } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; { Option } = Select;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { RadioGroup } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; RadioItem = RadioGroup.Item;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; { Constants } = Table;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; mockData = {\n  data: [\n    {\n      email: &lt;span class=\&quot;hljs-string\&quot;&gt;'xw@abc.com'&lt;/span&gt;,\n      nameId: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaowang'&lt;/span&gt;,\n      name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小王'&lt;/span&gt;,\n      cityId: &lt;span class=\&quot;hljs-string\&quot;&gt;'bj'&lt;/span&gt;,\n      city: &lt;span class=\&quot;hljs-string\&quot;&gt;'北京'&lt;/span&gt;,\n    },\n    {\n      email: &lt;span class=\&quot;hljs-string\&quot;&gt;'xl@abc.com'&lt;/span&gt;,\n      nameId: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaoli'&lt;/span&gt;,\n      name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小李'&lt;/span&gt;,\n      cityId: &lt;span class=\&quot;hljs-string\&quot;&gt;'hz'&lt;/span&gt;,\n      city: &lt;span class=\&quot;hljs-string\&quot;&gt;'杭州'&lt;/span&gt;,\n    },\n  ],\n};\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      data: mockData,\n      showOtherColumn: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n    };\n  }\n\n\n  getTableValues() {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.table.getData());\n  }\n\n  handleTableChange(data, dataKey, pass) {\n    &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(data.data);\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n            { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'jsxid'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'jsxid'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;80&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;,\n        editKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'cityId'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'select'&lt;/span&gt;,\n        renderChildren: () =&amp;gt; [{ id: &lt;span class=\&quot;hljs-string\&quot;&gt;'bj'&lt;/span&gt;, name: &lt;span class=\&quot;hljs-string\&quot;&gt;'北京'&lt;/span&gt; }, { id: &lt;span class=\&quot;hljs-string\&quot;&gt;'hz'&lt;/span&gt;, name: &lt;span class=\&quot;hljs-string\&quot;&gt;'杭州'&lt;/span&gt; }].map(item =&amp;gt; &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Option&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;key&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{item.id}&lt;/span&gt;&amp;gt;&lt;/span&gt;{item.name}&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Option&lt;/span&gt;&amp;gt;&lt;/span&gt;)&lt;/span&gt;,\n        config: { filterOption: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt; } },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'name'&lt;/span&gt;,\n        editKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'nameId'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'姓名'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'radio'&lt;/span&gt;,\n        renderChildren: () =&amp;gt; [{ id: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaoli'&lt;/span&gt;, name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小李'&lt;/span&gt; }, { id: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaowang'&lt;/span&gt;, name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小王'&lt;/span&gt; }].map(item =&amp;gt; &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioItem&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;key&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{item.id}&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{item.name}&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{item.id}&lt;/span&gt; /&amp;gt;&lt;/span&gt;)&lt;/span&gt; },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'text'&lt;/span&gt;,\n        required: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n        rules: (cellData) =&amp;gt; {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;if&lt;/span&gt; (cellData.length === &lt;span class=\&quot;hljs-number\&quot;&gt;0&lt;/span&gt;) {\n            &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'不能为空'&lt;/span&gt;;\n          }\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;if&lt;/span&gt; (!Validator.isEmail(cellData)) {\n            &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'必须是一个合法的邮件地址'&lt;/span&gt;;\n          }\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;;\n        },\n      },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'action1'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作1'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'action'&lt;/span&gt;,\n        actions: [\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'编辑'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              me.table.editRow(rowData);\n            },\n            mode: Constants.MODE.VIEW,\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'保存'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              me.table.saveRow(rowData);\n            },\n            mode: Constants.MODE.EDIT,\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'删除'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              me.table.delRow(rowData);\n            },\n            mode: Constants.MODE.VIEW,\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'重置'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; {\n              me.table.resetRow(rowData);\n            },\n            mode: Constants.MODE.EDIT,\n          },\n        ],\n      },\n    ];\n\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      showPager: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      fetchParams: {},\n      jsxdata: me.state.data,\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      actionBar: {\n        新增行: () =&amp;gt; {\n          me.table.addEmptyRow();\n        },\n      },\n      jsxcolumns: columns,\n      processData: data =&amp;gt; data,\n      onChange: me.handleTableChange,\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.table = c; }} /&amp;gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{me.getTableValues.bind(me)}&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;marginTop:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;12px&lt;/span&gt;' }}&amp;gt;&lt;/span&gt;获取 Table 的值&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-edit'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;列固定&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;列固定&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;支持左侧或右侧列固定&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;5&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/fixed.md&quot;,&quot;filename&quot;:&quot;fixed&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-fixed&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true, fixed: true }, { dataKey: 'city', title: '城市', width: 150 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName' }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }, {\n        dataKey: 'action1',\n        title: '操作1',\n        width: 150,\n        type: 'action',\n        rightFixed: true,\n        actions: {\n          编辑: function _(rowData, actions) {\n            console.log(actions.addEmptyRow);\n            me.form.toggleSubComp(rowData);\n          },\n          删除: function _(rowData) {\n            me.form.delRow(rowData);\n          }\n        }\n      }];\n\n      var renderProps = {\n        height: 300,\n        fetchUrl: '/components/table/demo/data.json',\n        jsxcolumns: columns,\n        className: 'kuma-uxtable-split-line'\n      };\n      return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {\n          _this2.form = c;\n        } }));\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-fixed'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;, fixed: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;150&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt; },\n      { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;, ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'action1'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作1'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;150&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'action'&lt;/span&gt;,\n        rightFixed: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n        actions: {\n          编辑(rowData, actions) {\n            &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(actions.addEmptyRow);\n            me.form.toggleSubComp(rowData);\n          },\n          删除(rowData) {\n            me.form.delRow(rowData);\n          },\n        },\n      },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;300&lt;/span&gt;,\n      fetchUrl: &lt;span class=\&quot;hljs-string\&quot;&gt;'/components/table/demo/data.json'&lt;/span&gt;,\n      jsxcolumns: columns,\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(c)&lt;/span&gt; =&amp;gt;&lt;/span&gt; { this.form = c; }} /&amp;gt;)&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-fixed'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;大表头&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;大表头&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;列分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;6&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/group.md&quot;,&quot;filename&quot;:&quot;group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-group&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n// 第一列为radio的demo\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      data: props.data,\n      text: 1\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var me = this;\n      // 通过 rowSelection 对象表明需要行选择\n      var rowSelection = {\n        onSelect: function onSelect(record, selected, selectedRows) {\n          console.log(record, selected, selectedRows);\n        },\n        onSelectAll: function onSelectAll(selected, selectedRows) {\n          console.log(selected, selectedRows);\n        }\n      };\n      var columns = [{\n        dataKey: 'select',\n        type: 'checkboxSelector'\n      }, {\n        group: '分组',\n        columns: [{\n          dataKey: 'id',\n          title: 'ID',\n          width: 50\n        }, {\n          dataKey: 'country',\n          title: '国家',\n          width: 200,\n          ordered: true\n        }]\n      }, {\n        dataKey: 'city',\n        title: function title() {\n          return '城市';\n        },\n        width: 150,\n        ordered: true,\n        message: '都是中国城市'\n      }, {\n        dataKey: 'firstName',\n        title: 'FristName'\n      }, {\n        dataKey: 'lastName',\n        title: 'LastName'\n      }, {\n        group: '分组5',\n        columns: [{\n          dataKey: 'id',\n          title: 'ID',\n          width: 50\n        }, {\n          dataKey: 'country',\n          title: '国家',\n          width: 200,\n          ordered: true\n        }]\n      }, {\n        dataKey: 'email',\n        title: 'Email',\n        width: 200,\n        ordered: true\n      }, {\n        dataKey: 'action',\n        title: '链接',\n        width: 100,\n        render: function render() {\n          return React.createElement(\n            'div',\n            null,\n            React.createElement(\n              'a',\n              null,\n              '111'\n            )\n          );\n        }\n      }];\n      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n      var renderProps = {\n        height: 400,\n        pagerSizeOptions: [5, 10, 15, 20],\n        actionBar: {\n          Action: function Action() {\n            me.setState({\n              text: 2\n            });\n          }\n        },\n        showSearch: false,\n        showColumnPicker: true,\n        fetchUrl: fetchUrl,\n        rowSelector: 'checkboxSelector',\n        jsxcolumns: columns,\n        rowSelection: rowSelection\n      };\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(_uxcore.Table, _extends({}, renderProps, { className: 'kuma-uxtable-border-line' }))\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-group'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-comment\&quot;&gt;// 第一列为radio的demo&lt;/span&gt;\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      data: props.data,\n      text: &lt;span class=\&quot;hljs-number\&quot;&gt;1&lt;/span&gt;,\n    };\n  }\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; me = &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-comment\&quot;&gt;// 通过 rowSelection 对象表明需要行选择&lt;/span&gt;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; rowSelection = {\n      onSelect(record, selected, selectedRows) {\n        &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(record, selected, selectedRows);\n      },\n      onSelectAll(selected, selectedRows) {\n        &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(selected, selectedRows);\n      },\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'select'&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'checkboxSelector'&lt;/span&gt;,\n      },\n      {\n        group: &lt;span class=\&quot;hljs-string\&quot;&gt;'分组'&lt;/span&gt;,\n        columns: [\n          {\n            dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'id'&lt;/span&gt;,\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'ID'&lt;/span&gt;,\n            width: &lt;span class=\&quot;hljs-number\&quot;&gt;50&lt;/span&gt;,\n          },\n          {\n            dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;,\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;,\n            width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n            ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n          },\n        ],\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;,\n        title: () =&amp;gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;150&lt;/span&gt;,\n        ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n        message: &lt;span class=\&quot;hljs-string\&quot;&gt;'都是中国城市'&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'FristName'&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'lastName'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;,\n      },\n      {\n        group: &lt;span class=\&quot;hljs-string\&quot;&gt;'分组5'&lt;/span&gt;,\n        columns: [\n          {\n            dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'id'&lt;/span&gt;,\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'ID'&lt;/span&gt;,\n            width: &lt;span class=\&quot;hljs-number\&quot;&gt;50&lt;/span&gt;,\n          },\n          {\n            dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'country'&lt;/span&gt;,\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'国家'&lt;/span&gt;,\n            width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n            ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n          },\n        ],\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n        ordered: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      }, {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'action'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'链接'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;100&lt;/span&gt;,\n        render() {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;111&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;a&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;;&lt;/span&gt;\n        },\n      },\n    ];\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; fetchUrl = &lt;span class=\&quot;hljs-string\&quot;&gt;'http://eternalsky.me:8122/file/getGridJson.jsonp'&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      height: &lt;span class=\&quot;hljs-number\&quot;&gt;400&lt;/span&gt;,\n      pagerSizeOptions: [&lt;span class=\&quot;hljs-number\&quot;&gt;5&lt;/span&gt;, &lt;span class=\&quot;hljs-number\&quot;&gt;10&lt;/span&gt;, &lt;span class=\&quot;hljs-number\&quot;&gt;15&lt;/span&gt;, &lt;span class=\&quot;hljs-number\&quot;&gt;20&lt;/span&gt;],\n      actionBar: {\n        Action() {\n          me.setState({\n            text: &lt;span class=\&quot;hljs-number\&quot;&gt;2&lt;/span&gt;,\n          });\n        },\n      },\n      showSearch: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      fetchUrl,\n      rowSelector: &lt;span class=\&quot;hljs-string\&quot;&gt;'checkboxSelector'&lt;/span&gt;,\n      jsxcolumns: columns,\n      rowSelection,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} &lt;span class=\&quot;hljs-attribute\&quot;&gt;className&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;kuma-uxtable-border-line\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-group'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;行展开&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行展开&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;Table 允许用户传入自定义行展开内容。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;7&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/subcomp.md&quot;,&quot;filename&quot;:&quot;subcomp&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-subcomp&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var me = this;\n      // 通过 rowSelection 对象表明需要行选择\n      var rowSelection = {\n        onSelect: function onSelect(record, selected, selectedRows) {\n          console.log(record, selected, selectedRows);\n        },\n        onSelectAll: function onSelectAll(selected, selectedRows) {\n          console.log(selected, selectedRows);\n        }\n      };\n      var columns = [{\n        dataKey: 'select',\n        type: 'checkboxSelector'\n      }, {\n        dataKey: 'id',\n        title: 'ID',\n        width: 50,\n        hidden: true\n      }, {\n        dataKey: 'country',\n        title: '国家',\n        width: 200,\n        ordered: true\n      }, {\n        dataKey: 'city',\n        title: '城市',\n        width: 150,\n        ordered: true,\n        message: '都是中国城市'\n      }, {\n        dataKey: 'firstName',\n        title: 'FristName'\n      }, {\n        dataKey: 'lastName',\n        title: 'LastName'\n      }, {\n        dataKey: 'email',\n        title: 'Email',\n        width: 200,\n        ordered: true\n      }];\n      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n      var renderProps = {\n        height: 400,\n        fetchUrl: fetchUrl,\n        jsxcolumns: columns,\n        rowSelection: rowSelection,\n        className: 'kuma-uxtable-split-line',\n        renderSubComp: function renderSubComp(rowData) {\n          var subProps = {\n            jsxcolumns: [{\n              dataKey: 'id',\n              title: '序号'\n            }, {\n              dataKey: 'class',\n              title: '分类',\n              width: 200\n            }, {\n              dataKey: 'dep',\n              title: '部门',\n              width: 200\n            }, {\n              dataKey: 'person',\n              title: '采购员',\n              width: 200\n            }],\n            jsxdata: {\n              data: [{ id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' }]\n            },\n            className: 'kuma-uxtable-ghost'\n          };\n          return React.createElement(\n            'div',\n            { style: { padding: '0 24px', background: 'rgba(31,56,88,0.04)' } },\n            React.createElement(_uxcore.Table, subProps)\n          );\n        }\n      };\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function saveRef(c) {\n            me.table = c;\n          } }))\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-subcomp'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;import { Table } from 'uxcore';\n\nclass Demo extends React.Component {\n  render() {\n    const me = this;\n    // 通过 rowSelection 对象表明需要行选择\n    const rowSelection = {\n      onSelect(record, selected, selectedRows) {\n        console.log(record, selected, selectedRows);\n      },\n      onSelectAll(selected, selectedRows) {\n        console.log(selected, selectedRows);\n      },\n    };\n    const columns = [\n      {\n        dataKey: 'select',\n        type: 'checkboxSelector',\n      },\n      {\n        dataKey: 'id',\n        title: 'ID',\n        width: 50,\n        hidden: true,\n      },\n      {\n        dataKey: 'country',\n        title: '国家',\n        width: 200,\n        ordered: true,\n      },\n      {\n        dataKey: 'city',\n        title: '城市',\n        width: 150,\n        ordered: true,\n        message: '都是中国城市',\n      },\n      {\n        dataKey: 'firstName',\n        title: 'FristName',\n      },\n      {\n        dataKey: 'lastName',\n        title: 'LastName',\n      },\n      {\n        dataKey: 'email',\n        title: 'Email',\n        width: 200,\n        ordered: true,\n      },\n    ];\n    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n    const renderProps = {\n      height: 400,\n      fetchUrl,\n      jsxcolumns: columns,\n      rowSelection,\n      className: 'kuma-uxtable-split-line',\n      renderSubComp: (rowData) =&amp;gt; {\n        const subProps = {\n          jsxcolumns: [\n            {\n              dataKey: 'id',\n              title: '序号',\n            },\n            {\n              dataKey: 'class',\n              title: '分类',\n              width: 200,\n            },\n            {\n              dataKey: 'dep',\n              title: '部门',\n              width: 200,\n            },\n            {\n              dataKey: 'person',\n              title: '采购员',\n              width: 200,\n            },\n          ],\n          jsxdata: {\n            data: [\n              { id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n              { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n              { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n              { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' },\n            ],\n          },\n          className: 'kuma-uxtable-ghost',\n        };\n        return (\n          &amp;lt;div style={{ padding: '0 24px', background: 'rgba(31,56,88,0.04)' }}&amp;gt;\n            &amp;lt;Table {...subProps} /&amp;gt;\n          &amp;lt;/div&amp;gt;\n        );\n      },\n    };\n    return (\n      &amp;lt;div&amp;gt;\n        &amp;lt;Table {...renderProps} ref={function saveRef(c) { me.table = c; }} /&amp;gt;\n      &amp;lt;/div&amp;gt;\n    );\n  }\n}\n\nReactDOM.render(&amp;lt;Demo /&amp;gt;, document.getElementById('components-table-demo-subcomp'));&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;style type=\&quot;text/css\&quot;&gt;.sub-box {\n    border: 1px dashed yellowgreen;\n\n}\n.sub-box &gt; div {\n    display: inline-block;\n    font-size: 16px;\n    width: 200px;\n    line-height: 40px;\n    padding: 10px 20px;\n}&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;span class=\&quot;hljs-class\&quot;&gt;.sub-box&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;border&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;1px&lt;/span&gt; dashed yellowgreen&lt;/span&gt;&lt;/span&gt;;\n\n}&lt;/span&gt;\n&lt;span class=\&quot;hljs-class\&quot;&gt;.sub-box&lt;/span&gt; &amp;gt; &lt;span class=\&quot;hljs-tag\&quot;&gt;div&lt;/span&gt; &lt;span class=\&quot;hljs-rules\&quot;&gt;{\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;display&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; inline-block&lt;/span&gt;&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;font-size&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;16px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;width&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;200px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;line-height&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;40px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n    &lt;span class=\&quot;hljs-rule\&quot;&gt;&lt;span class=\&quot;hljs-attribute\&quot;&gt;padding&lt;/span&gt;:&lt;span class=\&quot;hljs-value\&quot;&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;10px&lt;/span&gt; &lt;span class=\&quot;hljs-number\&quot;&gt;20px&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;;\n}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;行分组&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;行分组&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;根据某列的值进行行分组&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;12&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/row-group.md&quot;,&quot;filename&quot;:&quot;row-group&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-row-group&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar commonData = {\n  title: '一级标题',\n  entity: '蚂蚁金服（中国）',\n  institution: '招商银行丨杭州分行'\n};\n\nvar companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];\n\nvar personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];\n\nvar mixArray = function mixArray(arr1, arr2) {\n  var twoArray = arr1.map(function (item) {\n    return arr2.map(function (i) {\n      return _extends({}, item, i);\n    });\n  });\n  var result = [];\n  twoArray.forEach(function (item) {\n    item.forEach(function (i) {\n      result.push(i);\n    });\n  });\n  return result;\n};\n\n//* 第一列为radio的demo\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var tableProps = {\n        jsxcolumns: [{ dataKey: 'company', title: '公司', width: 200 }, { dataKey: 'title', title: '标题', width: 200 }, { dataKey: 'entity', title: '支付实体', width: 200 }, { dataKey: 'institution', title: '金融机构', width: 200 }, { dataKey: 'person', title: '申请人', width: 200 }],\n        jsxdata: {\n          data: mixArray(personData, companyData).map(function (item) {\n            return _extends({}, item, commonData);\n          })\n        },\n        className: 'kuma-uxtable-split-line',\n        rowGroupKey: 'company',\n        defaultRowGroupActiveKeys: 2,\n        showColumnPicker: true\n      };\n      return React.createElement(_uxcore.Table, tableProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-row-group'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; commonData = {\n  title: &lt;span class=\&quot;hljs-string\&quot;&gt;'一级标题'&lt;/span&gt;,\n  entity: &lt;span class=\&quot;hljs-string\&quot;&gt;'蚂蚁金服（中国）'&lt;/span&gt;,\n  institution: &lt;span class=\&quot;hljs-string\&quot;&gt;'招商银行丨杭州分行'&lt;/span&gt;,\n};\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; companyData = [\n  { company: &lt;span class=\&quot;hljs-string\&quot;&gt;'阿里巴巴网络技术有限公司'&lt;/span&gt; },\n  { company: &lt;span class=\&quot;hljs-string\&quot;&gt;'蚂蚁金服有限公司'&lt;/span&gt; },\n  {},\n];\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; personData = [\n  { person: &lt;span class=\&quot;hljs-string\&quot;&gt;'Vernon Norman'&lt;/span&gt; },\n  { person: &lt;span class=\&quot;hljs-string\&quot;&gt;'David Hammond'&lt;/span&gt; },\n];\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; mixArray = (arr1, arr2) =&amp;gt; {\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; twoArray = arr1.map(item =&amp;gt; arr2.map(i =&amp;gt; ({ ...item, ...i })));\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; result = [];\n  twoArray.forEach((item) =&amp;gt; {\n    item.forEach((i) =&amp;gt; {\n      result.push(i);\n    });\n  });\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; result;\n};\n\n&lt;span class=\&quot;hljs-comment\&quot;&gt;//* 第一列为radio的demo&lt;/span&gt;\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; tableProps = {\n      jsxcolumns: [\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'company'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'公司'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'title'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'标题'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'entity'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'支付实体'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'institution'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'金融机构'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'person'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'申请人'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt; },\n      ],\n      jsxdata: {\n        data: mixArray(personData, companyData).map(item =&amp;gt; ({ ...item, ...commonData })),\n      },\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      rowGroupKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'company'&lt;/span&gt;,\n      defaultRowGroupActiveKeys: &lt;span class=\&quot;hljs-number\&quot;&gt;2&lt;/span&gt;,\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...tableProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-row-group'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;style type=\&quot;text/css\&quot;&gt;&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;页底&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;页底&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;提供一个空白行供自定义渲染，适用于 合计 等场景，同时支持行分组 Footer，可选择性关闭。&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;13&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/footer.md&quot;,&quot;filename&quot;:&quot;footer&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-footer&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar commonData = {\n  title: '一级标题',\n  entity: '蚂蚁金服（中国）',\n  institution: '招商银行丨杭州分行',\n  money: '60000'\n};\n\nvar companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];\n\nvar personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];\n\nvar mixArray = function mixArray(arr1, arr2) {\n  var twoArray = arr1.map(function (item) {\n    return arr2.map(function (i) {\n      return _extends({}, item, i);\n    });\n  });\n  var result = [];\n  twoArray.forEach(function (item) {\n    item.forEach(function (i) {\n      result.push(i);\n    });\n  });\n  return result;\n};\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo() {\n    _classCallCheck(this, Demo);\n\n    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var tableProps = {\n        jsxcolumns: [{ dataKey: 'company', title: '公司', width: '20%' }, { dataKey: 'title', title: '标题', width: '20%', fixed: true }, { dataKey: 'money', title: '金额', width: '20%', type: 'money' }, { dataKey: 'entity', title: '支付实体', width: '50%' }, { dataKey: 'institution', title: '金融机构', width: '20%' }, { dataKey: 'person', title: '申请人', width: '20%' }],\n        jsxdata: {\n          data: mixArray(personData, companyData).map(function (item) {\n            return _extends({}, item, commonData);\n          })\n        },\n        className: 'kuma-uxtable-split-line',\n        rowGroupKey: 'company',\n        footer: function footer(_ref) {\n          var data = _ref.data,\n              column = _ref.column,\n              from = _ref.from,\n              _ref$rowGroupData = _ref.rowGroupData,\n              rowGroupData = _ref$rowGroupData === undefined ? {} : _ref$rowGroupData;\n\n          if (column.dataKey === 'title') {\n            return '合计';\n          }\n          if (column.dataKey === 'money') {\n            var total = 0;\n            if (from === 'rowGroup') {\n              rowGroupData.items &amp;&amp; rowGroupData.items.length &amp;&amp; rowGroupData.items.forEach(function (rowData) {\n                total += parseInt(rowData.money, 10);\n              });\n            } else {\n              data.forEach(function (rowData) {\n                total += parseInt(rowData.money, 10);\n              });\n            }\n\n            return _uxcore.Formatter.money(total.toString(), ',');\n          }\n          return null;\n        },\n        // width: 600,\n        size: 'small',\n        showRowGroupFooter: true\n        // height: 300,\n      };\n      return React.createElement(_uxcore.Table, tableProps);\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-footer'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Formatter } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; commonData = {\n  title: &lt;span class=\&quot;hljs-string\&quot;&gt;'一级标题'&lt;/span&gt;,\n  entity: &lt;span class=\&quot;hljs-string\&quot;&gt;'蚂蚁金服（中国）'&lt;/span&gt;,\n  institution: &lt;span class=\&quot;hljs-string\&quot;&gt;'招商银行丨杭州分行'&lt;/span&gt;,\n  money: &lt;span class=\&quot;hljs-string\&quot;&gt;'60000'&lt;/span&gt;,\n};\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; companyData = [\n  { company: &lt;span class=\&quot;hljs-string\&quot;&gt;'阿里巴巴网络技术有限公司'&lt;/span&gt; },\n  { company: &lt;span class=\&quot;hljs-string\&quot;&gt;'蚂蚁金服有限公司'&lt;/span&gt; },\n  {},\n];\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; personData = [\n  { person: &lt;span class=\&quot;hljs-string\&quot;&gt;'Vernon Norman'&lt;/span&gt; },\n  { person: &lt;span class=\&quot;hljs-string\&quot;&gt;'David Hammond'&lt;/span&gt; },\n];\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; mixArray = (arr1, arr2) =&amp;gt; {\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; twoArray = arr1.map(item =&amp;gt; arr2.map(i =&amp;gt; ({ ...item, ...i })));\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; result = [];\n  twoArray.forEach((item) =&amp;gt; {\n    item.forEach((i) =&amp;gt; {\n      result.push(i);\n    });\n  });\n  &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; result;\n};\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; tableProps = {\n      jsxcolumns: [\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'company'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'公司'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'title'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'标题'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt;, fixed: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'money'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'金额'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt;, type: &lt;span class=\&quot;hljs-string\&quot;&gt;'money'&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'entity'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'支付实体'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'50%'&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'institution'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'金融机构'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt; },\n        { dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'person'&lt;/span&gt;, title: &lt;span class=\&quot;hljs-string\&quot;&gt;'申请人'&lt;/span&gt;, width: &lt;span class=\&quot;hljs-string\&quot;&gt;'20%'&lt;/span&gt; },\n      ],\n      jsxdata: {\n        data: mixArray(personData, companyData).map(item =&amp;gt; ({ ...item, ...commonData })),\n      },\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n      rowGroupKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'company'&lt;/span&gt;,\n      footer: ({ data, column, from, rowGroupData = {} }) =&amp;gt; {\n        &lt;span class=\&quot;hljs-keyword\&quot;&gt;if&lt;/span&gt; (column.dataKey === &lt;span class=\&quot;hljs-string\&quot;&gt;'title'&lt;/span&gt;) {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'合计'&lt;/span&gt;;\n        }\n        &lt;span class=\&quot;hljs-keyword\&quot;&gt;if&lt;/span&gt; (column.dataKey === &lt;span class=\&quot;hljs-string\&quot;&gt;'money'&lt;/span&gt;) {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;let&lt;/span&gt; total = &lt;span class=\&quot;hljs-number\&quot;&gt;0&lt;/span&gt;;\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;if&lt;/span&gt; (from === &lt;span class=\&quot;hljs-string\&quot;&gt;'rowGroup'&lt;/span&gt;) {\n            rowGroupData.items &amp;amp;&amp;amp; rowGroupData.items.length &amp;amp;&amp;amp; rowGroupData.items.forEach((rowData) =&amp;gt; {\n              total += &lt;span class=\&quot;hljs-built_in\&quot;&gt;parseInt&lt;/span&gt;(rowData.money, &lt;span class=\&quot;hljs-number\&quot;&gt;10&lt;/span&gt;);\n            });\n          } &lt;span class=\&quot;hljs-keyword\&quot;&gt;else&lt;/span&gt; {\n            data.forEach((rowData) =&amp;gt; {\n              total += &lt;span class=\&quot;hljs-built_in\&quot;&gt;parseInt&lt;/span&gt;(rowData.money, &lt;span class=\&quot;hljs-number\&quot;&gt;10&lt;/span&gt;);\n            });\n          }\n\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; Formatter.money(total.toString(), &lt;span class=\&quot;hljs-string\&quot;&gt;','&lt;/span&gt;);\n        }\n        &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; &lt;span class=\&quot;hljs-literal\&quot;&gt;null&lt;/span&gt;;\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// width: 600,&lt;/span&gt;\n      size: &lt;span class=\&quot;hljs-string\&quot;&gt;'small'&lt;/span&gt;,\n      showRowGroupFooter: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// height: 300,&lt;/span&gt;\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...tableProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-footer'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;style type=\&quot;text/css\&quot;&gt;&lt;/style&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;css\&quot;&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;顶部操作栏&quot;,&quot;description&quot;:&quot;\n&lt;p&gt;顶部操作栏&lt;/p&gt;\n&quot;,&quot;order&quot;:&quot;14&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actionbar.md&quot;,&quot;filename&quot;:&quot;actionbar&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actionbar&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i &lt; arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      data: props.data,\n      text: 1,\n      columns: [{\n        dataKey: 'firstName',\n        title: React.createElement(\n          'span',\n          null,\n          '\\u81EA\\u5B9A\\u4E49\\u5217\\u5934'\n        ),\n        // fixed: true,\n        // width: '15%',\n        filters: [{\n          text: 'Joe',\n          value: 'Joe'\n        }, {\n          text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',\n          value: 'Jim'\n        }, {\n          text: 'Submenu',\n          value: 'Submenu',\n          children: [{\n            text: 'Green',\n            value: 'Green'\n          }, {\n            text: 'Black',\n            value: 'Black'\n          }]\n        }],\n        message: '这是一个提示',\n        ordered: true\n      }, {\n        dataKey: 'lastName',\n        title: 'LastName',\n        message: 'nihao',\n        isDisable: function isDisable() {\n          return true;\n        }\n        // fixed: true,\n        // rightFixed: true\n        // width: '55%',\n      }, {\n        dataKey: 'email',\n        title: 'Email',\n        // width: '30%',\n        ordered: true,\n        message: 'sadfsdf\\nnsafdasdfasdf'\n      }, {\n        title: '操作1',\n        width: '200px',\n        type: 'action',\n        // fixed: false,\n        actions: [{\n          title: 'click',\n          callback: function callback() {},\n          mode: 'edit'\n        }, {\n          title: '删除',\n          callback: function callback() {},\n          mode: 'view'\n        }, {\n          title: 'view',\n          callback: function callback() {},\n          mode: 'edit'\n        }, {\n          title: 'view',\n          callback: function callback() {}\n        }]\n      }]\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'render',\n    value: function render() {\n      var _this2 = this;\n\n      var me = this;\n      var columns = this.state.columns;\n      // 通过 rowSelection 对象表明需要行选择\n\n      var rowSelection = {\n        onSelect: function onSelect(record, selected, selectedRows) {\n          console.log(record, selected, selectedRows);\n        },\n        onSelectAll: function onSelectAll(selected, selectedRows) {\n          console.log(selected, selectedRows);\n        }\n      };\n      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n      var renderProps = {\n        height: 400,\n        pagerSizeOptions: [5, 10, 15, 20],\n        useListActionBar: true,\n        actionBar: {\n          className: 'my-list-action-bar',\n          // 是否显示全选\n          showSelectAll: true,\n          // 按钮配置\n          buttons: [{\n            title: 'Action Button',\n            render: function render() {\n              return React.createElement(\n                _uxcore.Button,\n                null,\n                'Button1'\n              );\n            },\n\n            keepActiveInCustomView: false,\n            callback: function callback() {\n              console.log(me.table.getData());\n            }\n          }, {\n            title: '按钮',\n            keepActiveInCustomView: false,\n            // size: 'large',\n            type: 'primary',\n            // className: 'xxxxx',\n            callback: function callback() {\n              me.table.selectAll(true);\n            }\n          }],\n          // 文案提示\n          actionBarTip: '已找到记录123条',\n          // 自定义内容\n          customBarItem: {\n            render: function render() {\n              return React.createElement(\n                'p',\n                { style: { color: 'red' }, onClick: function onClick(e) {\n                    console.log(e);\n                  } },\n                '\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9'\n              );\n            }\n          },\n          // 行排序\n          rowOrder: {\n            iconName: 'paixu-jiangxu',\n            // keepActiveInCustomView: true,\n            defaultValue: {\n              text: '排序方式一',\n              value: '123'\n            },\n            items: [{\n              text: '排序方式一',\n              value: '123'\n            }, {\n              text: '排序方式二',\n              value: '456'\n            }],\n            onChange: function onChange(data) {\n              console.log(data);\n            }\n          },\n          // 列排序\n          columnsOrder: {\n            iconName: 'huxiangguanzhu',\n            // keepActiveInCustomView: true,\n            title: '列排序',\n            includeActionColumn: false, // 优先级低于fixed和rightFixed\n            onChange: function onChange(dragInfo, data) {\n              console.log(data);\n            }\n          },\n          // 列选择\n          columnsPicker: {\n            iconName: 'zidingyilie',\n            title: '自定义列',\n            keepActiveInCustomView: false,\n            setPickerGroups: function setPickerGroups(columns) {\n              return [{\n                title: '分组1',\n                columns: columns.filter(function (item, index) {\n                  return index &gt;= 1;\n                })\n              }, {\n                title: '分组2',\n                columns: columns.filter(function (item, index) {\n                  return index &lt;= 0;\n                })\n              }];\n            },\n            onChange: function onChange(data) {\n              console.log(data);\n            }\n          },\n          // 自定义视图，支持返回promise和component\n          // customView: {\n          //   render(data, currentPage) {\n          //     console.log(data, currentPage);\n          //     // return (\n          //     //   &lt;Test name={'自定义的View'}/&gt;\n          //     // )\n          //     return new Promise(function(resolve) {\n          //       setTimeout(() =&gt; {\n          //         resolve(&lt;Test name={'自定义的View'}/&gt;)\n          //       })\n          //     })\n          //   }\n          // },\n          // 是否显示翻页器\n          showMiniPager: true,\n          search: {\n            // placeholder: '请输入搜索关键字',\n            onSearch: function onSearch() {\n              console.log(234234);\n            }\n          },\n          // 在自定义视图下移出翻页器\n          removePagerInCustomView: true,\n          linkBar: [{\n            title: '修改columns',\n            callback: function callback() {\n              _this2.setState({\n                columns: _this2.state.columns.filter(function (item) {\n                  return item.title === 'LastName' || item.title === 'Email' || item.title === '操作1';\n                })\n              });\n            }\n          }]\n        },\n        showSearch: false,\n        showColumnPicker: true,\n        fetchUrl: fetchUrl,\n        rowSelector: 'checkboxSelector',\n        jsxcolumns: columns,\n        rowSelection: rowSelection\n      };\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(_uxcore.Table, _extends({ ref: function ref(c) {\n            _this2.table = c;\n          } }, renderProps, { className: 'kuma-uxtable-border-line' }))\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-actionbar'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Button } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      data: props.data,\n      text: &lt;span class=\&quot;hljs-number\&quot;&gt;1&lt;/span&gt;,\n      columns: [\n        {\n         dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'firstName'&lt;/span&gt;,\n         title: &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;自定义列头&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;span&lt;/span&gt;&amp;gt;&lt;/span&gt;,\n         // fixed: true,\n         // width: '15%',\n         filters: [{\n           text: 'Joe',\n           value: 'Joe',\n         }, {\n           text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',\n           value: 'Jim',\n         }, {\n           text: 'Submenu',\n           value: 'Submenu',\n           children: [{\n             text: 'Green',\n             value: 'Green',\n           }, {\n             text: 'Black',\n             value: 'Black',\n           }],\n         }],\n         message: '这是一个提示',\n         ordered: true,\n        },\n\n        {\n         dataKey: 'lastName',\n         title: 'LastName',\n         message: 'nihao',\n         isDisable: function() {\n           return true\n         },\n         // fixed: true,\n         // rightFixed: true\n         // width: '55%',\n        },\n        {\n         dataKey: 'email',\n         title: 'Email',\n         // width: '30%',\n         ordered: true,\n         message: `sadfsdf\\nnsafdasdfasdf`\n        },\n        {\n         title: '操作1',\n         width: '200px',\n         type: 'action',\n         // fixed: false,\n         actions: [{\n           title: 'click',\n           callback: () =&amp;gt; {\n           },\n           mode: 'edit',\n         }, {\n           title: '删除',\n           callback: () =&amp;gt; {\n           },\n           mode: 'view',\n         }, {\n           title: 'view',\n           callback: () =&amp;gt; { },\n           mode: 'edit',\n         }, {\n           title: 'view',\n           callback: () =&amp;gt; { },\n         }],\n        },\n      ]\n    };\n  }\n  render() {\n    const me = this;\n    const { columns } = this.state\n    // 通过 rowSelection 对象表明需要行选择\n    const rowSelection = {\n      onSelect(record, selected, selectedRows) {\n        console.log(record, selected, selectedRows);\n      },\n      onSelectAll(selected, selectedRows) {\n        console.log(selected, selectedRows);\n      },\n    };\n    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';\n    const renderProps = {\n      height: 400,\n      pagerSizeOptions: [5, 10, 15, 20],\n      useListActionBar: true,\n    actionBar: {\n      className: 'my-list-action-bar',\n      // 是否显示全选\n      showSelectAll: true,\n      // 按钮配置\n      buttons: [\n        {\n          title: 'Action Button',\n          render() {\n            return (\n              &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;Button1&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Button&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            )&lt;/span&gt;\n          },\n          keepActiveInCustomView: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n          callback: () =&amp;gt; {\n            &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(me.table.getData());\n          },\n        },\n        {\n          title: &lt;span class=\&quot;hljs-string\&quot;&gt;'按钮'&lt;/span&gt;,\n          keepActiveInCustomView: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n          &lt;span class=\&quot;hljs-comment\&quot;&gt;// size: 'large',&lt;/span&gt;\n          type: &lt;span class=\&quot;hljs-string\&quot;&gt;'primary'&lt;/span&gt;,\n          &lt;span class=\&quot;hljs-comment\&quot;&gt;// className: 'xxxxx',&lt;/span&gt;\n          callback: () =&amp;gt; {\n            me.table.selectAll(&lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;);\n          }\n        }\n      ],\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 文案提示&lt;/span&gt;\n      actionBarTip: &lt;span class=\&quot;hljs-string\&quot;&gt;'已找到记录123条'&lt;/span&gt;,\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 自定义内容&lt;/span&gt;\n      customBarItem: {\n        render() {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n            &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;p&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;style&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{{color:&lt;/span&gt; '&lt;span class=\&quot;hljs-attribute\&quot;&gt;red&lt;/span&gt;'}} &lt;span class=\&quot;hljs-attribute\&quot;&gt;onClick&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{(e)&lt;/span&gt; =&amp;gt;&lt;/span&gt; {console.log(e)}}&amp;gt;自定义内容&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;p&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          )&lt;/span&gt;\n        }\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 行排序&lt;/span&gt;\n      rowOrder: {\n        iconName: &lt;span class=\&quot;hljs-string\&quot;&gt;'paixu-jiangxu'&lt;/span&gt;,\n        &lt;span class=\&quot;hljs-comment\&quot;&gt;// keepActiveInCustomView: true,&lt;/span&gt;\n        defaultValue: {\n          text: &lt;span class=\&quot;hljs-string\&quot;&gt;'排序方式一'&lt;/span&gt;,\n          value: &lt;span class=\&quot;hljs-string\&quot;&gt;'123'&lt;/span&gt;\n        },\n        items: [\n          {\n            text: &lt;span class=\&quot;hljs-string\&quot;&gt;'排序方式一'&lt;/span&gt;,\n            value: &lt;span class=\&quot;hljs-string\&quot;&gt;'123'&lt;/span&gt;\n          },\n          {\n            text: &lt;span class=\&quot;hljs-string\&quot;&gt;'排序方式二'&lt;/span&gt;,\n            value: &lt;span class=\&quot;hljs-string\&quot;&gt;'456'&lt;/span&gt;\n          }\n        ],\n        onChange(data) {\n          &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(data)\n        }\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 列排序&lt;/span&gt;\n      columnsOrder: {\n        iconName: &lt;span class=\&quot;hljs-string\&quot;&gt;'huxiangguanzhu'&lt;/span&gt;,\n        &lt;span class=\&quot;hljs-comment\&quot;&gt;// keepActiveInCustomView: true,&lt;/span&gt;\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'列排序'&lt;/span&gt;,\n        includeActionColumn: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,  &lt;span class=\&quot;hljs-comment\&quot;&gt;// 优先级低于fixed和rightFixed&lt;/span&gt;\n        onChange(dragInfo, data) {\n          &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(data)\n        }\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 列选择&lt;/span&gt;\n      columnsPicker: {\n        iconName: &lt;span class=\&quot;hljs-string\&quot;&gt;'zidingyilie'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'自定义列'&lt;/span&gt;,\n        keepActiveInCustomView: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n        setPickerGroups(columns) {\n          &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; [\n            {\n              title: &lt;span class=\&quot;hljs-string\&quot;&gt;'分组1'&lt;/span&gt;,\n              columns: columns.filter((item, index) =&amp;gt; {&lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; index &amp;gt;= &lt;span class=\&quot;hljs-number\&quot;&gt;1&lt;/span&gt;})\n            },\n            {\n              title: &lt;span class=\&quot;hljs-string\&quot;&gt;'分组2'&lt;/span&gt;,\n              columns: columns.filter((item, index) =&amp;gt; {&lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; index &amp;lt;= &lt;span class=\&quot;hljs-number\&quot;&gt;0&lt;/span&gt;})\n            }\n          ]\n        },\n        onChange(data) {\n          &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(data)\n        }\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 自定义视图，支持返回promise和component&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// customView: {&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//   render(data, currentPage) {&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     console.log(data, currentPage);&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     // return (&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     //   &amp;lt;Test name={'自定义的View'}/&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     // )&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     return new Promise(function(resolve) {&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//       setTimeout(() =&amp;gt; {&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//         resolve(&amp;lt;Test name={'自定义的View'}/&amp;gt;)&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//       })&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//     })&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;//   }&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// },&lt;/span&gt;\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 是否显示翻页器&lt;/span&gt;\n      showMiniPager: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      search: {\n        &lt;span class=\&quot;hljs-comment\&quot;&gt;// placeholder: '请输入搜索关键字',&lt;/span&gt;\n        onSearch() {\n          &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(&lt;span class=\&quot;hljs-number\&quot;&gt;234234&lt;/span&gt;)\n        }\n      },\n      &lt;span class=\&quot;hljs-comment\&quot;&gt;// 在自定义视图下移出翻页器&lt;/span&gt;\n      removePagerInCustomView: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      linkBar: [\n        {\n          title: &lt;span class=\&quot;hljs-string\&quot;&gt;'修改columns'&lt;/span&gt;,\n          callback: () =&amp;gt; {\n            &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n              columns: &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.columns.filter(item =&amp;gt; {\n                &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; item.title === &lt;span class=\&quot;hljs-string\&quot;&gt;'LastName'&lt;/span&gt;\n                  || item.title === &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;\n                  || item.title === &lt;span class=\&quot;hljs-string\&quot;&gt;'操作1'&lt;/span&gt;\n              })\n            })\n          },\n        }\n      ],\n    },\n      showSearch: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      showColumnPicker: &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n      fetchUrl,\n      rowSelector: &lt;span class=\&quot;hljs-string\&quot;&gt;'checkboxSelector'&lt;/span&gt;,\n      jsxcolumns: columns,\n      rowSelection,\n    };\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;ref&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{c&lt;/span&gt; =&amp;gt;&lt;/span&gt; {this.table = c}} {...renderProps} className=\&quot;kuma-uxtable-border-line\&quot; /&amp;gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-actionbar'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;},{&quot;title&quot;:&quot;操作列&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;tags&quot;:[],&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;meta&quot;:{&quot;title&quot;:&quot;操作列&quot;,&quot;description&quot;:&quot;\n&quot;,&quot;filepath&quot;:&quot;site/components/table/demo/actioncolumn.md&quot;,&quot;filename&quot;:&quot;actioncolumn&quot;,&quot;directory&quot;:&quot;components/table/demo&quot;,&quot;id&quot;:&quot;components-table-demo-actioncolumn&quot;,&quot;template&quot;:&quot;demos&quot;,&quot;html&quot;:&quot;&lt;script&gt;(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i &lt; props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\&quot;value\&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\&quot;Cannot call a class as a function\&quot;); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\&quot;this hasn't been initialised - super() hasn't been called\&quot;); } return call &amp;&amp; (typeof call === \&quot;object\&quot; || typeof call === \&quot;function\&quot;) ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \&quot;function\&quot; &amp;&amp; superClass !== null) { throw new TypeError(\&quot;Super expression must either be null or a function, not \&quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar InputFormField = _uxcore.Form.InputFormField,\n    FormRow = _uxcore.Form.FormRow,\n    RadioGroupFormField = _uxcore.Form.RadioGroupFormField;\nvar RadioItem = RadioGroupFormField.Item;\n\nvar mockData = {\n  data: [{\n    email: 'xw@abc.com',\n    nameId: 'xiaowang',\n    name: '小王',\n    cityId: 'bj',\n    city: '北京'\n  }, {\n    email: 'xl@abc.com',\n    nameId: 'xiaoli',\n    name: '小李',\n    cityId: 'hz',\n    city: '杭州'\n  }],\n  currentPage: 2,\n  totalCount: 30\n};\n\nvar Demo = function (_React$Component) {\n  _inherits(Demo, _React$Component);\n\n  function Demo(props) {\n    _classCallCheck(this, Demo);\n\n    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n    _this.state = {\n      data: mockData,\n      showOtherColumn: false,\n      value: {\n        num: 1,\n        action: 'link'\n      }\n    };\n    return _this;\n  }\n\n  _createClass(Demo, [{\n    key: 'handleChange',\n    value: function handleChange(value) {\n      this.setState({\n        value: value\n      });\n    }\n  }, {\n    key: 'render',\n    value: function render() {\n      var columns = [{\n        dataKey: 'jsxid',\n        title: 'jsxid2',\n        width: 80\n      }, {\n        dataKey: 'city',\n        editKey: 'cityId',\n        title: '城市',\n        width: 200\n      }, {\n        dataKey: 'name',\n        editKey: 'nameId',\n        title: '姓名',\n        width: 200\n      }, {\n        dataKey: 'email',\n        title: 'Email',\n        width: 200\n      }, {\n        dataKey: 'action1',\n        title: '操作1',\n        width: 280,\n        type: 'action',\n        actionType: this.state.value.action,\n        collapseNum: this.state.value.num || 3, // 超过 3 个将开始折叠\n        actions: [{\n          title: '操作一',\n          callback: function callback(rowData) {\n            console.log(rowData);\n          }\n        }, {\n          title: '操作二',\n          callback: function callback(rowData) {\n            console.log(rowData);\n          }\n        }, {\n          title: '禁用',\n          callback: function callback(rowData) {\n            console.log(rowData);\n          },\n          isDisable: function isDisable() {\n            return true;\n          }\n        }, {\n          title: '操作四',\n          callback: function callback(rowData) {\n            console.log(rowData);\n          }\n        }, {\n          title: '操作五',\n          callback: function callback(rowData) {\n            console.log(rowData);\n          }\n        }]\n      }];\n\n      var renderProps = {\n        jsxdata: mockData,\n        jsxcolumns: columns,\n        showPager: false,\n        className: 'kuma-uxtable-split-line'\n      };\n\n      return React.createElement(\n        'div',\n        null,\n        React.createElement(\n          _uxcore.Form,\n          { jsxonChange: this.handleChange.bind(this), jsxvalues: this.state.value },\n          React.createElement(\n            FormRow,\n            { totalFlex: 3 },\n            React.createElement(InputFormField, { jsxname: 'num', jsxlabel: '\\u6298\\u53E0\\u7684\\u4E2A\\u6570' }),\n            React.createElement(\n              RadioGroupFormField,\n              { jsxname: 'action', jsxlabel: '\\u6837\\u5F0F\\u98CE\\u683C' },\n              React.createElement(RadioItem, { value: 'button', text: '\\u6309\\u94AE' }),\n              React.createElement(RadioItem, { value: 'link', text: '\\u94FE\\u63A5' })\n            )\n          )\n        ),\n        React.createElement(_uxcore.Table, renderProps)\n      );\n    }\n  }]);\n\n  return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-actioncolumn'));})()&lt;/script&gt;&lt;div class=\&quot;highlight\&quot;&gt;&lt;pre&gt;&lt;code class=\&quot;javascript\&quot;&gt;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Table } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;import&lt;/span&gt; { Form } &lt;span class=\&quot;hljs-keyword\&quot;&gt;from&lt;/span&gt; &lt;span class=\&quot;hljs-string\&quot;&gt;'uxcore'&lt;/span&gt;;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; {\n  InputFormField,\n  FormRow,\n  RadioGroupFormField,\n} = Form;\n\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; { Item: RadioItem } = RadioGroupFormField;\n&lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; mockData = {\n  data: [\n    {\n      email: &lt;span class=\&quot;hljs-string\&quot;&gt;'xw@abc.com'&lt;/span&gt;,\n      nameId: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaowang'&lt;/span&gt;,\n      name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小王'&lt;/span&gt;,\n      cityId: &lt;span class=\&quot;hljs-string\&quot;&gt;'bj'&lt;/span&gt;,\n      city: &lt;span class=\&quot;hljs-string\&quot;&gt;'北京'&lt;/span&gt;,\n    },\n    {\n      email: &lt;span class=\&quot;hljs-string\&quot;&gt;'xl@abc.com'&lt;/span&gt;,\n      nameId: &lt;span class=\&quot;hljs-string\&quot;&gt;'xiaoli'&lt;/span&gt;,\n      name: &lt;span class=\&quot;hljs-string\&quot;&gt;'小李'&lt;/span&gt;,\n      cityId: &lt;span class=\&quot;hljs-string\&quot;&gt;'hz'&lt;/span&gt;,\n      city: &lt;span class=\&quot;hljs-string\&quot;&gt;'杭州'&lt;/span&gt;,\n    },\n  ],\n  currentPage: &lt;span class=\&quot;hljs-number\&quot;&gt;2&lt;/span&gt;,\n  totalCount: &lt;span class=\&quot;hljs-number\&quot;&gt;30&lt;/span&gt;,\n};\n\n&lt;span class=\&quot;hljs-class\&quot;&gt;&lt;span class=\&quot;hljs-keyword\&quot;&gt;class&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; &lt;span class=\&quot;hljs-keyword\&quot;&gt;extends&lt;/span&gt; &lt;span class=\&quot;hljs-title\&quot;&gt;React&lt;/span&gt;.&lt;span class=\&quot;hljs-title\&quot;&gt;Component&lt;/span&gt; &lt;/span&gt;{\n\n  constructor(props) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;super&lt;/span&gt;(props);\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state = {\n      data: mockData,\n      showOtherColumn: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      value: {\n        num: &lt;span class=\&quot;hljs-number\&quot;&gt;1&lt;/span&gt;,\n        action: &lt;span class=\&quot;hljs-string\&quot;&gt;'link'&lt;/span&gt;,\n      },\n    };\n  }\n\n  handleChange(value) {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.setState({\n      value,\n    });\n  }\n\n  render() {\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; columns = [\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'jsxid'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'jsxid2'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;80&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'city'&lt;/span&gt;,\n        editKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'cityId'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'城市'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'name'&lt;/span&gt;,\n        editKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'nameId'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'姓名'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'email'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'Email'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;200&lt;/span&gt;,\n      },\n      {\n        dataKey: &lt;span class=\&quot;hljs-string\&quot;&gt;'action1'&lt;/span&gt;,\n        title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作1'&lt;/span&gt;,\n        width: &lt;span class=\&quot;hljs-number\&quot;&gt;280&lt;/span&gt;,\n        type: &lt;span class=\&quot;hljs-string\&quot;&gt;'action'&lt;/span&gt;,\n        actionType: &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.value.action,\n        collapseNum: &lt;span class=\&quot;hljs-keyword\&quot;&gt;this&lt;/span&gt;.state.value.num || &lt;span class=\&quot;hljs-number\&quot;&gt;3&lt;/span&gt;, &lt;span class=\&quot;hljs-comment\&quot;&gt;// 超过 3 个将开始折叠&lt;/span&gt;\n        actions: [\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作一'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; { &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(rowData); },\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作二'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; { &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(rowData); },\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'禁用'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; { &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(rowData); },\n            isDisable: () =&amp;gt; &lt;span class=\&quot;hljs-literal\&quot;&gt;true&lt;/span&gt;,\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作四'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; { &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(rowData); },\n          },\n          {\n            title: &lt;span class=\&quot;hljs-string\&quot;&gt;'操作五'&lt;/span&gt;,\n            callback: (rowData) =&amp;gt; { &lt;span class=\&quot;hljs-built_in\&quot;&gt;console&lt;/span&gt;.log(rowData); },\n          },\n        ],\n      },\n    ];\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;const&lt;/span&gt; renderProps = {\n      jsxdata: mockData,\n      jsxcolumns: columns,\n      showPager: &lt;span class=\&quot;hljs-literal\&quot;&gt;false&lt;/span&gt;,\n      className: &lt;span class=\&quot;hljs-string\&quot;&gt;'kuma-uxtable-split-line'&lt;/span&gt;,\n    };\n\n    &lt;span class=\&quot;hljs-keyword\&quot;&gt;return&lt;/span&gt; (\n      &lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxonChange&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{this.handleChange.bind(this)}&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxvalues&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{this.state.value}&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;FormRow&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;totalFlex&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;{3}&lt;/span&gt;&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;InputFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;num\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;折叠的个数\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxname&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;action\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;jsxlabel&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;样式风格\&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;\n              &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioItem&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;button\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;按钮\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n              &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;RadioItem&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;value&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;link\&quot;&lt;/span&gt; &lt;span class=\&quot;hljs-attribute\&quot;&gt;text&lt;/span&gt;=&lt;span class=\&quot;hljs-value\&quot;&gt;\&quot;链接\&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;\n            &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;RadioGroupFormField&lt;/span&gt;&amp;gt;&lt;/span&gt;\n          &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;FormRow&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;Form&lt;/span&gt;&amp;gt;&lt;/span&gt;\n        &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Table&lt;/span&gt; {&lt;span class=\&quot;hljs-attribute\&quot;&gt;...renderProps&lt;/span&gt;} /&amp;gt;&lt;/span&gt;\n      &lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;/&lt;span class=\&quot;hljs-title\&quot;&gt;div&lt;/span&gt;&amp;gt;&lt;/span&gt;\n    )&lt;/span&gt;;\n  }\n}\n\nReactDOM.render(&lt;span class=\&quot;xml\&quot;&gt;&lt;span class=\&quot;hljs-tag\&quot;&gt;&amp;lt;&lt;span class=\&quot;hljs-title\&quot;&gt;Demo&lt;/span&gt; /&amp;gt;&lt;/span&gt;, document.getElementById('components-table-demo-actioncolumn'));&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&quot;},&quot;status&quot;:&quot;public&quot;,&quot;toc&quot;:&quot;&quot;}]</div><div id="J_NavBar"></div><div id="code-box-components-table-demo-basic" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-basic">基本表格</a></div></div><div class="code-box-demo"><div id="components-table-demo-basic"></div></div><div title="点击查看详细代码" class="code-box-desc">
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];

      var fetchUrl = '/components/table/demo/data.json';

      var renderProps = {
        height: 400,
        actionColumn: {
          edit: function edit() {},
          del: function del() {}
        },
        className: 'kuma-uxtable-split-line',
        fetchParams: {},
        showColumnPicker: false,
        fetchUrl: fetchUrl,
        jsxcolumns: columns
      };
      return React.createElement(_uxcore.Table, renderProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
    ];

    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'/components/table/demo/data.json'</span>;

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      actionColumn: {
        edit() {},
        del() {},
      },
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      fetchParams: {},
      showColumnPicker: <span class="hljs-literal">false</span>,
      fetchUrl,
      jsxcolumns: columns,
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-basic'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-style" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-style">风格</a></div></div><div class="code-box-demo"><div id="components-table-demo-style"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>有三种风格可控选择：分割线、线框和斑马纹。<br>有两种尺寸可以选择：small &amp; middle</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var RadioGroupFormField = _uxcore.Form.RadioGroupFormField;
var Item = RadioGroupFormField.Item;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      value: {
        style: 'split',
        size: 'middle'
      }
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var classNameMap = {
        split: 'kuma-uxtable-split-line',
        border: 'kuma-uxtable-border-line'
      };

      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];

      var fetchUrl = '/components/table/demo/data.json';

      var renderProps = {
        height: 400,
        size: this.state.value.size,
        className: classNameMap[this.state.value.style],
        showColumnPicker: false,
        fetchUrl: fetchUrl,
        jsxcolumns: columns
      };

      return React.createElement(
        'div',
        null,
        React.createElement(
          _uxcore.Form,
          { jsxvalues: this.state.value, jsxonChange: function jsxonChange(value) {
              _this2.setState({ value: value });
            } },
          React.createElement(
            RadioGroupFormField,
            { jsxlabel: '\u98CE\u683C', jsxname: 'style' },
            React.createElement(Item, { value: 'split', text: '\u5206\u5272\u7EBF' }),
            React.createElement(Item, { value: 'border', text: '\u7EBF\u6846' }),
            React.createElement(Item, { value: 'zebra', text: '\u7EBF\u6591\u9A6C\u7EB9\u6846' })
          ),
          React.createElement(
            RadioGroupFormField,
            { jsxlabel: '\u5C3A\u5BF8', jsxname: 'size' },
            React.createElement(Item, { value: 'small', text: '\u5C0F\u578B' }),
            React.createElement(Item, { value: 'middle', text: '\u666E\u901A' })
          )
        ),
        React.createElement(_uxcore.Table, renderProps)
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-style'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> { RadioGroupFormField } = Form;
<span class="hljs-keyword">const</span> { Item } = RadioGroupFormField;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      value: {
        style: <span class="hljs-string">'split'</span>,
        size: <span class="hljs-string">'middle'</span>,
      },
    };
  }

  render() {
    <span class="hljs-keyword">const</span> classNameMap = {
      split: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      border: <span class="hljs-string">'kuma-uxtable-border-line'</span>,
    };

    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
    ];

    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'/components/table/demo/data.json'</span>;

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      size: <span class="hljs-keyword">this</span>.state.value.size,
      className: classNameMap[<span class="hljs-keyword">this</span>.state.value.style],
      showColumnPicker: <span class="hljs-literal">false</span>,
      fetchUrl,
      jsxcolumns: columns,
    };

    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">jsxvalues</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">jsxonChange</span>=<span class="hljs-value">{(value)</span> =&gt;</span> { this.setState({ value }); }}&gt;
          <span class="hljs-tag">&lt;<span class="hljs-title">RadioGroupFormField</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"风格"</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"style"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"split"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"分割线"</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"border"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"线框"</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"zebra"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"线斑马纹框"</span> /&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">RadioGroupFormField</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">RadioGroupFormField</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"尺寸"</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"size"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"small"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"小型"</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">Item</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"middle"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"普通"</span> /&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">RadioGroupFormField</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-style'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-adv" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-adv">高级表格 (操作栏 + 自定义列 + 分页)</a></div></div><div class="code-box-demo"><div id="components-table-demo-adv"></div></div><div title="点击查看详细代码" class="code-box-desc">
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var me = this;
      // 通过 rowSelection 对象表明需要行选择
      var rowSelection = {
        onSelect: function onSelect(record, selected, selectedRows) {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: function onSelectAll(selected, selectedRows) {
          console.log(selected, selectedRows);
        }
      };

      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true }, { dataKey: 'city', title: '城市', width: 200, ordered: true }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }];

      var fetchUrl = '/components/table/demo/data.json';

      var renderProps = {
        height: 400,
        actionBar: [{
          title: '工具条',
          callback: function callback() {
            alert('工具条');
          }
        }],
        className: 'kuma-uxtable-split-line',
        showSearch: true,
        fetchParams: {},
        fetchUrl: fetchUrl,
        jsxcolumns: columns,
        rowSelection: rowSelection
      };
      return React.createElement(_uxcore.Table, renderProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-adv'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-comment">// 通过 rowSelection 对象表明需要行选择</span>
    <span class="hljs-keyword">const</span> rowSelection = {
      onSelect(record, selected, selectedRows) {
        <span class="hljs-built_in">console</span>.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        <span class="hljs-built_in">console</span>.log(selected, selectedRows);
      },
    };

    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
    ];

    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'/components/table/demo/data.json'</span>;

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      actionBar: [
        {
          title: <span class="hljs-string">'工具条'</span>,
          callback: () =&gt; {
            alert(<span class="hljs-string">'工具条'</span>);
          },
        }
      ],
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      showSearch: <span class="hljs-literal">true</span>,
      fetchParams: {},
      fetchUrl,
      jsxcolumns: columns,
      rowSelection,
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-adv'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-percent" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-percent">百分比布局 + 可调整列宽</a></div></div><div class="code-box-demo"><div id="components-table-demo-percent"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>表格的列按照百分比布局，同时支持和列固定的组合。拖动屏幕边缘，调整表格整体宽度试一试~</p>
<p>列标题处支持拖拽调整列宽。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var columns = [{ dataKey: 'country', title: '国家', width: '30%', ordered: true }, { dataKey: 'city', title: '城市', width: '20%', ordered: true }, { dataKey: 'firstName', title: 'FristName', width: '15%' }, { dataKey: 'lastName', title: 'LastName', width: '20%' }, { dataKey: 'email', title: 'Email', width: '15%', ordered: true }];

      var fetchUrl = '/components/table/demo/data.json';

      var renderProps = {
        height: 400,
        actionColumn: {
          edit: function edit() {},
          del: function del() {}
        },
        columnResizeable: true,
        className: 'kuma-uxtable-border-line',
        fetchParams: {},
        showColumnPicker: false,
        fetchUrl: fetchUrl,
        jsxcolumns: columns
      };
      return React.createElement(_uxcore.Table, renderProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-percent'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-string">'30%'</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-string">'20%'</span>, ordered: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-string">'15%'</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span>, width: <span class="hljs-string">'20%'</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-string">'15%'</span>, ordered: <span class="hljs-literal">true</span> },
    ];

    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'/components/table/demo/data.json'</span>;

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      actionColumn: {
        edit() {},
        del() {},
      },
      columnResizeable: <span class="hljs-literal">true</span>,
      className: <span class="hljs-string">'kuma-uxtable-border-line'</span>,
      fetchParams: {},
      showColumnPicker: <span class="hljs-literal">false</span>,
      fetchUrl,
      jsxcolumns: columns,
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-percent'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-tree" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-tree">Tree 表格</a></div></div><div class="code-box-demo"><div id="components-table-demo-tree"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>树形表格，数据格式参考：http://uxco.re/components/table/demo/data.json</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _uxcore = require('uxcore');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

;

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var columns = [{
        dataKey: 'country',
        title: '国家国家国家国家',
        width: 200
      }, {
        dataKey: 'city',
        title: '城市',
        width: 200
      }, {
        dataKey: 'firstName',
        title: 'FristName',
        width: 200

      }, {
        dataKey: 'lastName',
        title: 'LastName',
        width: 200,
        order: true
      }, {
        title: '操作',
        type: 'action',
        rightFixed: true,
        width: '300px',
        collapseNum: 5,
        actions: [{
          title: '新增子行',
          callback: function callback(rowData) {
            _this2.table.addSubRowFromTop({
              "country": '\u4E2D\u56FD',
              "city": "杭州",
              "firstName": 'FirstName_' + setTimeout(0),
              "lastName": "LastName"
            }, rowData, function () {
              console.log(_this2.table.getData());
            });
          }
        }, {
          title: '删除',
          callback: function callback(rowData) {
            _this2.table.delRow(rowData);
          }
        }]
      }];

      var renderProps = {
        height: 400,
        // width: 800,
        showSearch: true,
        expandIconType: 'adderSubtractor',
        fetchUrl: '/components/table/demo/data.json',
        jsxcolumns: columns,
        renderModel: 'tree',
        rowSelection: {
          onSelect: function onSelect(checked, selectedRow, selectedRows) {
            console.log('selectedRows:', selectedRows);
          },
          onSelectAll: function onSelectAll() {}
        }
      };
      return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {
          _this2.table = c;
        } }));
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-tree'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> classnames <span class="hljs-keyword">from</span> <span class="hljs-string">'classnames'</span>;;
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">const</span> columns = [
      {
        dataKey: <span class="hljs-string">'country'</span>,
        title: <span class="hljs-string">'国家国家国家国家'</span>,
        width: <span class="hljs-number">200</span>,
      },
      {
        dataKey: <span class="hljs-string">'city'</span>,
        title: <span class="hljs-string">'城市'</span>,
        width: <span class="hljs-number">200</span>,
      },
      {
        dataKey: <span class="hljs-string">'firstName'</span>,
        title: <span class="hljs-string">'FristName'</span>,
        width: <span class="hljs-number">200</span>,

      },
      {
        dataKey: <span class="hljs-string">'lastName'</span>,
        title: <span class="hljs-string">'LastName'</span>,
        width: <span class="hljs-number">200</span>,
        order: <span class="hljs-literal">true</span>,
      },
      {
        title: <span class="hljs-string">'操作'</span>,
        type: <span class="hljs-string">'action'</span>,
        rightFixed: <span class="hljs-literal">true</span>,
        width: <span class="hljs-string">'300px'</span>,
        collapseNum: <span class="hljs-number">5</span>,
        actions: [
          {
            title: <span class="hljs-string">'新增子行'</span>,
            callback: (rowData) =&gt; {
              <span class="hljs-keyword">this</span>.table.addSubRowFromTop({
                <span class="hljs-string">"country"</span>: <span class="hljs-string">`中国`</span>,
                <span class="hljs-string">"city"</span>: <span class="hljs-string">"杭州"</span>,
                <span class="hljs-string">"firstName"</span>: <span class="hljs-string">`FirstName_<span class="hljs-subst">${setTimeout(0)}</span>`</span>,
                <span class="hljs-string">"lastName"</span>: <span class="hljs-string">"LastName"</span>,
              }, rowData, () =&gt; {
                <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.table.getData())
              })
            }
          },
          {
            title: <span class="hljs-string">'删除'</span>,
            callback: (rowData) =&gt; {
              <span class="hljs-keyword">this</span>.table.delRow(rowData);
            },
          }
        ],
      },
    ];

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      <span class="hljs-comment">// width: 800,</span>
      showSearch: <span class="hljs-literal">true</span>,
      expandIconType: <span class="hljs-string">'adderSubtractor'</span>,
      fetchUrl: <span class="hljs-string">'/components/table/demo/data.json'</span>,
      jsxcolumns: columns,
      renderModel: <span class="hljs-string">'tree'</span>,
      rowSelection: {
        onSelect: (checked, selectedRow, selectedRows) =&gt; {
          <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'selectedRows:'</span>, selectedRows);
        },
        onSelectAll: () =&gt; {},
      },
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> {this.table = c}} /&gt;)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-tree'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-filter" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-filter">列筛选</a></div></div><div class="code-box-demo"><div id="components-table-demo-filter"></div></div><div title="点击查看详细代码" class="code-box-desc">
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var columns = [{ dataKey: 'country', title: '国家', width: 200,
        filters: [{
          text: 'Joe',
          value: 'Joe'
        }, {
          text: 'Jim',
          value: 'Jim'
        }, {
          text: 'Submenu',
          value: 'Submenu',
          children: [{
            text: 'Green',
            value: 'Green'
          }, {
            text: 'Black',
            value: 'Black'
          }]
        }]
      }, { dataKey: 'city', title: '城市', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName', width: 200 }, { dataKey: 'email', title: 'Email', width: 200 }];

      var fetchUrl = '/components/table/demo/data.json';

      var renderProps = {
        height: 400,
        className: 'kuma-uxtable-split-line',
        showColumnPicker: false,
        fetchUrl: fetchUrl,
        jsxcolumns: columns
      };
      return React.createElement(_uxcore.Table, renderProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-filter'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, 
        filters: [{
          text: <span class="hljs-string">'Joe'</span>,
          value: <span class="hljs-string">'Joe'</span>,
        }, {
          text: <span class="hljs-string">'Jim'</span>,
          value: <span class="hljs-string">'Jim'</span>,
        }, {
          text: <span class="hljs-string">'Submenu'</span>,
          value: <span class="hljs-string">'Submenu'</span>,
          children: [{
            text: <span class="hljs-string">'Green'</span>,
            value: <span class="hljs-string">'Green'</span>,
          }, {
            text: <span class="hljs-string">'Black'</span>,
            value: <span class="hljs-string">'Black'</span>,
          }],
        }],
      },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-number">200</span> },
    ];

    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'/components/table/demo/data.json'</span>;

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      showColumnPicker: <span class="hljs-literal">false</span>,
      fetchUrl,
      jsxcolumns: columns,
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-filter'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-edit" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-edit">行内编辑表格</a></div></div><div class="code-box-demo"><div id="components-table-demo-edit"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>行内编辑表格，除了内置的几种可编辑列之外，我们还提供了自定义可编辑列的方法，请点击相应 <a href="/scene/customTable/#code-box-scene-customtable-demo-custom-edit">场景</a> 查看</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _uxcore = require('uxcore');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

;
var Option = _uxcore.Select.Option;

var RadioItem = _uxcore.RadioGroup.Item;
var Constants = _uxcore.Table.Constants;

var mockData = {
  data: [{
    email: 'xw@abc.com',
    nameId: 'xiaowang',
    name: '小王',
    cityId: 'bj',
    city: '北京'
  }, {
    email: 'xl@abc.com',
    nameId: 'xiaoli',
    name: '小李',
    cityId: 'hz',
    city: '杭州'
  }]
};

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      data: mockData,
      showOtherColumn: false
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'getTableValues',
    value: function getTableValues() {
      console.log(this.table.getData());
    }
  }, {
    key: 'handleTableChange',
    value: function handleTableChange(data, dataKey, pass) {
      console.log(data.data);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var columns = [{ dataKey: 'jsxid', title: 'jsxid', width: 80 }, { dataKey: 'city',
        editKey: 'cityId',
        title: '城市',
        width: 200,
        type: 'select',
        renderChildren: function renderChildren() {
          return [{ id: 'bj', name: '北京' }, { id: 'hz', name: '杭州' }].map(function (item) {
            return React.createElement(
              Option,
              { key: item.id },
              item.name
            );
          });
        },
        config: { filterOption: false } }, { dataKey: 'name',
        editKey: 'nameId',
        title: '姓名',
        width: 200,
        type: 'radio',
        renderChildren: function renderChildren() {
          return [{ id: 'xiaoli', name: '小李' }, { id: 'xiaowang', name: '小王' }].map(function (item) {
            return React.createElement(RadioItem, { key: item.id, text: item.name, value: item.id });
          });
        } }, {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        type: 'text',
        required: true,
        rules: function rules(cellData) {
          if (cellData.length === 0) {
            return '不能为空';
          }
          if (!_uxcore.Validator.isEmail(cellData)) {
            return '必须是一个合法的邮件地址';
          }
          return true;
        }
      }, { dataKey: 'action1',
        title: '操作1',
        width: 200,
        type: 'action',
        actions: [{
          title: '编辑',
          callback: function callback(rowData) {
            me.table.editRow(rowData);
          },
          mode: Constants.MODE.VIEW
        }, {
          title: '保存',
          callback: function callback(rowData) {
            me.table.saveRow(rowData);
          },
          mode: Constants.MODE.EDIT
        }, {
          title: '删除',
          callback: function callback(rowData) {
            me.table.delRow(rowData);
          },
          mode: Constants.MODE.VIEW
        }, {
          title: '重置',
          callback: function callback(rowData) {
            me.table.resetRow(rowData);
          },
          mode: Constants.MODE.EDIT
        }]
      }];

      var renderProps = {
        showPager: false,
        fetchParams: {},
        jsxdata: me.state.data,
        className: 'kuma-uxtable-split-line',
        actionBar: {
          新增行: function _() {
            me.table.addEmptyRow();
          }
        },
        jsxcolumns: columns,
        processData: function processData(data) {
          return data;
        },
        onChange: me.handleTableChange
      };

      return React.createElement(
        'div',
        null,
        React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {
            _this2.table = c;
          } })),
        React.createElement(
          _uxcore.Button,
          { onClick: me.getTableValues.bind(me), style: { marginTop: '12px' } },
          '\u83B7\u53D6 Table \u7684\u503C'
        )
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-edit'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> classnames <span class="hljs-keyword">from</span> <span class="hljs-string">'classnames'</span>;;
<span class="hljs-keyword">import</span> { Validator } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Select } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> { Option } = Select;
<span class="hljs-keyword">import</span> { RadioGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> RadioItem = RadioGroup.Item;
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">const</span> { Constants } = Table;
<span class="hljs-keyword">const</span> mockData = {
  data: [
    {
      email: <span class="hljs-string">'xw@abc.com'</span>,
      nameId: <span class="hljs-string">'xiaowang'</span>,
      name: <span class="hljs-string">'小王'</span>,
      cityId: <span class="hljs-string">'bj'</span>,
      city: <span class="hljs-string">'北京'</span>,
    },
    {
      email: <span class="hljs-string">'xl@abc.com'</span>,
      nameId: <span class="hljs-string">'xiaoli'</span>,
      name: <span class="hljs-string">'小李'</span>,
      cityId: <span class="hljs-string">'hz'</span>,
      city: <span class="hljs-string">'杭州'</span>,
    },
  ],
};

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      data: mockData,
      showOtherColumn: <span class="hljs-literal">false</span>,
    };
  }


  getTableValues() {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.table.getData());
  }

  handleTableChange(data, dataKey, pass) {
    <span class="hljs-built_in">console</span>.log(data.data);
  }

  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">const</span> columns = [
            { dataKey: <span class="hljs-string">'jsxid'</span>, title: <span class="hljs-string">'jsxid'</span>, width: <span class="hljs-number">80</span> },
      { dataKey: <span class="hljs-string">'city'</span>,
        editKey: <span class="hljs-string">'cityId'</span>,
        title: <span class="hljs-string">'城市'</span>,
        width: <span class="hljs-number">200</span>,
        type: <span class="hljs-string">'select'</span>,
        renderChildren: () =&gt; [{ id: <span class="hljs-string">'bj'</span>, name: <span class="hljs-string">'北京'</span> }, { id: <span class="hljs-string">'hz'</span>, name: <span class="hljs-string">'杭州'</span> }].map(item =&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Option</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{item.id}</span>&gt;</span>{item.name}<span class="hljs-tag">&lt;/<span class="hljs-title">Option</span>&gt;</span>)</span>,
        config: { filterOption: <span class="hljs-literal">false</span> } },
      { dataKey: <span class="hljs-string">'name'</span>,
        editKey: <span class="hljs-string">'nameId'</span>,
        title: <span class="hljs-string">'姓名'</span>,
        width: <span class="hljs-number">200</span>,
        type: <span class="hljs-string">'radio'</span>,
        renderChildren: () =&gt; [{ id: <span class="hljs-string">'xiaoli'</span>, name: <span class="hljs-string">'小李'</span> }, { id: <span class="hljs-string">'xiaowang'</span>, name: <span class="hljs-string">'小王'</span> }].map(item =&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">RadioItem</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{item.id}</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">{item.name}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{item.id}</span> /&gt;</span>)</span> },
      {
        dataKey: <span class="hljs-string">'email'</span>,
        title: <span class="hljs-string">'Email'</span>,
        width: <span class="hljs-number">200</span>,
        type: <span class="hljs-string">'text'</span>,
        required: <span class="hljs-literal">true</span>,
        rules: (cellData) =&gt; {
          <span class="hljs-keyword">if</span> (cellData.length === <span class="hljs-number">0</span>) {
            <span class="hljs-keyword">return</span> <span class="hljs-string">'不能为空'</span>;
          }
          <span class="hljs-keyword">if</span> (!Validator.isEmail(cellData)) {
            <span class="hljs-keyword">return</span> <span class="hljs-string">'必须是一个合法的邮件地址'</span>;
          }
          <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
        },
      },
      { dataKey: <span class="hljs-string">'action1'</span>,
        title: <span class="hljs-string">'操作1'</span>,
        width: <span class="hljs-number">200</span>,
        type: <span class="hljs-string">'action'</span>,
        actions: [
          {
            title: <span class="hljs-string">'编辑'</span>,
            callback: (rowData) =&gt; {
              me.table.editRow(rowData);
            },
            mode: Constants.MODE.VIEW,
          },
          {
            title: <span class="hljs-string">'保存'</span>,
            callback: (rowData) =&gt; {
              me.table.saveRow(rowData);
            },
            mode: Constants.MODE.EDIT,
          },
          {
            title: <span class="hljs-string">'删除'</span>,
            callback: (rowData) =&gt; {
              me.table.delRow(rowData);
            },
            mode: Constants.MODE.VIEW,
          },
          {
            title: <span class="hljs-string">'重置'</span>,
            callback: (rowData) =&gt; {
              me.table.resetRow(rowData);
            },
            mode: Constants.MODE.EDIT,
          },
        ],
      },
    ];


    <span class="hljs-keyword">const</span> renderProps = {
      showPager: <span class="hljs-literal">false</span>,
      fetchParams: {},
      jsxdata: me.state.data,
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      actionBar: {
        新增行: () =&gt; {
          me.table.addEmptyRow();
        },
      },
      jsxcolumns: columns,
      processData: data =&gt; data,
      onChange: me.handleTableChange,
    };

    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.table = c; }} /&gt;
        <span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{me.getTableValues.bind(me)}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginTop:</span> '<span class="hljs-attribute">12px</span>' }}&gt;</span>获取 Table 的值<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-edit'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-fixed" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-fixed">列固定</a></div></div><div class="code-box-demo"><div id="components-table-demo-fixed"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>支持左侧或右侧列固定</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var columns = [{ dataKey: 'country', title: '国家', width: 200, ordered: true, fixed: true }, { dataKey: 'city', title: '城市', width: 150 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'firstName', title: 'FristName', width: 200 }, { dataKey: 'lastName', title: 'LastName' }, { dataKey: 'email', title: 'Email', width: 200, ordered: true }, {
        dataKey: 'action1',
        title: '操作1',
        width: 150,
        type: 'action',
        rightFixed: true,
        actions: {
          编辑: function _(rowData, actions) {
            console.log(actions.addEmptyRow);
            me.form.toggleSubComp(rowData);
          },
          删除: function _(rowData) {
            me.form.delRow(rowData);
          }
        }
      }];

      var renderProps = {
        height: 300,
        fetchUrl: '/components/table/demo/data.json',
        jsxcolumns: columns,
        className: 'kuma-uxtable-split-line'
      };
      return React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function ref(c) {
          _this2.form = c;
        } }));
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-fixed'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-keyword">const</span> columns = [
      { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span>, fixed: <span class="hljs-literal">true</span> },
      { dataKey: <span class="hljs-string">'city'</span>, title: <span class="hljs-string">'城市'</span>, width: <span class="hljs-number">150</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'firstName'</span>, title: <span class="hljs-string">'FristName'</span>, width: <span class="hljs-number">200</span> },
      { dataKey: <span class="hljs-string">'lastName'</span>, title: <span class="hljs-string">'LastName'</span> },
      { dataKey: <span class="hljs-string">'email'</span>, title: <span class="hljs-string">'Email'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
      {
        dataKey: <span class="hljs-string">'action1'</span>,
        title: <span class="hljs-string">'操作1'</span>,
        width: <span class="hljs-number">150</span>,
        type: <span class="hljs-string">'action'</span>,
        rightFixed: <span class="hljs-literal">true</span>,
        actions: {
          编辑(rowData, actions) {
            <span class="hljs-built_in">console</span>.log(actions.addEmptyRow);
            me.form.toggleSubComp(rowData);
          },
          删除(rowData) {
            me.form.delRow(rowData);
          },
        },
      },
    ];

    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">300</span>,
      fetchUrl: <span class="hljs-string">'/components/table/demo/data.json'</span>,
      jsxcolumns: columns,
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
    };
    <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} <span class="hljs-attribute">ref</span>=<span class="hljs-value">{(c)</span> =&gt;</span> { this.form = c; }} /&gt;)</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-fixed'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-group" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-group">大表头</a></div></div><div class="code-box-demo"><div id="components-table-demo-group"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>列分组</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// 第一列为radio的demo
var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      data: props.data,
      text: 1
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var me = this;
      // 通过 rowSelection 对象表明需要行选择
      var rowSelection = {
        onSelect: function onSelect(record, selected, selectedRows) {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: function onSelectAll(selected, selectedRows) {
          console.log(selected, selectedRows);
        }
      };
      var columns = [{
        dataKey: 'select',
        type: 'checkboxSelector'
      }, {
        group: '分组',
        columns: [{
          dataKey: 'id',
          title: 'ID',
          width: 50
        }, {
          dataKey: 'country',
          title: '国家',
          width: 200,
          ordered: true
        }]
      }, {
        dataKey: 'city',
        title: function title() {
          return '城市';
        },
        width: 150,
        ordered: true,
        message: '都是中国城市'
      }, {
        dataKey: 'firstName',
        title: 'FristName'
      }, {
        dataKey: 'lastName',
        title: 'LastName'
      }, {
        group: '分组5',
        columns: [{
          dataKey: 'id',
          title: 'ID',
          width: 50
        }, {
          dataKey: 'country',
          title: '国家',
          width: 200,
          ordered: true
        }]
      }, {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true
      }, {
        dataKey: 'action',
        title: '链接',
        width: 100,
        render: function render() {
          return React.createElement(
            'div',
            null,
            React.createElement(
              'a',
              null,
              '111'
            )
          );
        }
      }];
      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
      var renderProps = {
        height: 400,
        pagerSizeOptions: [5, 10, 15, 20],
        actionBar: {
          Action: function Action() {
            me.setState({
              text: 2
            });
          }
        },
        showSearch: false,
        showColumnPicker: true,
        fetchUrl: fetchUrl,
        rowSelector: 'checkboxSelector',
        jsxcolumns: columns,
        rowSelection: rowSelection
      };
      return React.createElement(
        'div',
        null,
        React.createElement(_uxcore.Table, _extends({}, renderProps, { className: 'kuma-uxtable-border-line' }))
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-group'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-comment">// 第一列为radio的demo</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      data: props.data,
      text: <span class="hljs-number">1</span>,
    };
  }
  render() {
    <span class="hljs-keyword">const</span> me = <span class="hljs-keyword">this</span>;
    <span class="hljs-comment">// 通过 rowSelection 对象表明需要行选择</span>
    <span class="hljs-keyword">const</span> rowSelection = {
      onSelect(record, selected, selectedRows) {
        <span class="hljs-built_in">console</span>.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        <span class="hljs-built_in">console</span>.log(selected, selectedRows);
      },
    };
    <span class="hljs-keyword">const</span> columns = [
      {
        dataKey: <span class="hljs-string">'select'</span>,
        type: <span class="hljs-string">'checkboxSelector'</span>,
      },
      {
        group: <span class="hljs-string">'分组'</span>,
        columns: [
          {
            dataKey: <span class="hljs-string">'id'</span>,
            title: <span class="hljs-string">'ID'</span>,
            width: <span class="hljs-number">50</span>,
          },
          {
            dataKey: <span class="hljs-string">'country'</span>,
            title: <span class="hljs-string">'国家'</span>,
            width: <span class="hljs-number">200</span>,
            ordered: <span class="hljs-literal">true</span>,
          },
        ],
      },
      {
        dataKey: <span class="hljs-string">'city'</span>,
        title: () =&gt; <span class="hljs-string">'城市'</span>,
        width: <span class="hljs-number">150</span>,
        ordered: <span class="hljs-literal">true</span>,
        message: <span class="hljs-string">'都是中国城市'</span>,
      },
      {
        dataKey: <span class="hljs-string">'firstName'</span>,
        title: <span class="hljs-string">'FristName'</span>,
      },
      {
        dataKey: <span class="hljs-string">'lastName'</span>,
        title: <span class="hljs-string">'LastName'</span>,
      },
      {
        group: <span class="hljs-string">'分组5'</span>,
        columns: [
          {
            dataKey: <span class="hljs-string">'id'</span>,
            title: <span class="hljs-string">'ID'</span>,
            width: <span class="hljs-number">50</span>,
          },
          {
            dataKey: <span class="hljs-string">'country'</span>,
            title: <span class="hljs-string">'国家'</span>,
            width: <span class="hljs-number">200</span>,
            ordered: <span class="hljs-literal">true</span>,
          },
        ],
      },
      {
        dataKey: <span class="hljs-string">'email'</span>,
        title: <span class="hljs-string">'Email'</span>,
        width: <span class="hljs-number">200</span>,
        ordered: <span class="hljs-literal">true</span>,
      }, {
        dataKey: <span class="hljs-string">'action'</span>,
        title: <span class="hljs-string">'链接'</span>,
        width: <span class="hljs-number">100</span>,
        render() {
          <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span>&gt;</span>111<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>;</span>
        },
      },
    ];
    <span class="hljs-keyword">const</span> fetchUrl = <span class="hljs-string">'http://eternalsky.me:8122/file/getGridJson.jsonp'</span>;
    <span class="hljs-keyword">const</span> renderProps = {
      height: <span class="hljs-number">400</span>,
      pagerSizeOptions: [<span class="hljs-number">5</span>, <span class="hljs-number">10</span>, <span class="hljs-number">15</span>, <span class="hljs-number">20</span>],
      actionBar: {
        Action() {
          me.setState({
            text: <span class="hljs-number">2</span>,
          });
        },
      },
      showSearch: <span class="hljs-literal">false</span>,
      showColumnPicker: <span class="hljs-literal">true</span>,
      fetchUrl,
      rowSelector: <span class="hljs-string">'checkboxSelector'</span>,
      jsxcolumns: columns,
      rowSelection,
    };
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} <span class="hljs-attribute">className</span>=<span class="hljs-value">"kuma-uxtable-border-line"</span> /&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-group'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-subcomp" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-subcomp">行展开</a></div></div><div class="code-box-demo"><div id="components-table-demo-subcomp"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>Table 允许用户传入自定义行展开内容。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var me = this;
      // 通过 rowSelection 对象表明需要行选择
      var rowSelection = {
        onSelect: function onSelect(record, selected, selectedRows) {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: function onSelectAll(selected, selectedRows) {
          console.log(selected, selectedRows);
        }
      };
      var columns = [{
        dataKey: 'select',
        type: 'checkboxSelector'
      }, {
        dataKey: 'id',
        title: 'ID',
        width: 50,
        hidden: true
      }, {
        dataKey: 'country',
        title: '国家',
        width: 200,
        ordered: true
      }, {
        dataKey: 'city',
        title: '城市',
        width: 150,
        ordered: true,
        message: '都是中国城市'
      }, {
        dataKey: 'firstName',
        title: 'FristName'
      }, {
        dataKey: 'lastName',
        title: 'LastName'
      }, {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true
      }];
      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
      var renderProps = {
        height: 400,
        fetchUrl: fetchUrl,
        jsxcolumns: columns,
        rowSelection: rowSelection,
        className: 'kuma-uxtable-split-line',
        renderSubComp: function renderSubComp(rowData) {
          var subProps = {
            jsxcolumns: [{
              dataKey: 'id',
              title: '序号'
            }, {
              dataKey: 'class',
              title: '分类',
              width: 200
            }, {
              dataKey: 'dep',
              title: '部门',
              width: 200
            }, {
              dataKey: 'person',
              title: '采购员',
              width: 200
            }],
            jsxdata: {
              data: [{ id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' }, { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' }]
            },
            className: 'kuma-uxtable-ghost'
          };
          return React.createElement(
            'div',
            { style: { padding: '0 24px', background: 'rgba(31,56,88,0.04)' } },
            React.createElement(_uxcore.Table, subProps)
          );
        }
      };
      return React.createElement(
        'div',
        null,
        React.createElement(_uxcore.Table, _extends({}, renderProps, { ref: function saveRef(c) {
            me.table = c;
          } }))
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-subcomp'));})()</script><div class="highlight"><pre><code class="javascript">import { Table } from 'uxcore';

class Demo extends React.Component {
  render() {
    const me = this;
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };
    const columns = [
      {
        dataKey: 'select',
        type: 'checkboxSelector',
      },
      {
        dataKey: 'id',
        title: 'ID',
        width: 50,
        hidden: true,
      },
      {
        dataKey: 'country',
        title: '国家',
        width: 200,
        ordered: true,
      },
      {
        dataKey: 'city',
        title: '城市',
        width: 150,
        ordered: true,
        message: '都是中国城市',
      },
      {
        dataKey: 'firstName',
        title: 'FristName',
      },
      {
        dataKey: 'lastName',
        title: 'LastName',
      },
      {
        dataKey: 'email',
        title: 'Email',
        width: 200,
        ordered: true,
      },
    ];
    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
    const renderProps = {
      height: 400,
      fetchUrl,
      jsxcolumns: columns,
      rowSelection,
      className: 'kuma-uxtable-split-line',
      renderSubComp: (rowData) =&gt; {
        const subProps = {
          jsxcolumns: [
            {
              dataKey: 'id',
              title: '序号',
            },
            {
              dataKey: 'class',
              title: '分类',
              width: 200,
            },
            {
              dataKey: 'dep',
              title: '部门',
              width: 200,
            },
            {
              dataKey: 'person',
              title: '采购员',
              width: 200,
            },
          ],
          jsxdata: {
            data: [
              { id: '001', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '002', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '003', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
              { id: '004', class: 'API管理系统', dep: '用户体验部', person: '大圣' },
            ],
          },
          className: 'kuma-uxtable-ghost',
        };
        return (
          &lt;div style={{ padding: '0 24px', background: 'rgba(31,56,88,0.04)' }}&gt;
            &lt;Table {...subProps} /&gt;
          &lt;/div&gt;
        );
      },
    };
    return (
      &lt;div&gt;
        &lt;Table {...renderProps} ref={function saveRef(c) { me.table = c; }} /&gt;
      &lt;/div&gt;
    );
  }
}

ReactDOM.render(&lt;Demo /&gt;, document.getElementById('components-table-demo-subcomp'));</code></pre></div><style type="text/css">.sub-box {
    border: 1px dashed yellowgreen;

}
.sub-box > div {
    display: inline-block;
    font-size: 16px;
    width: 200px;
    line-height: 40px;
    padding: 10px 20px;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.sub-box</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> dashed yellowgreen</span></span>;

}</span>
<span class="hljs-class">.sub-box</span> &gt; <span class="hljs-tag">div</span> <span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">16px</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">40px</span></span></span>;
    <span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">10px</span> <span class="hljs-number">20px</span></span></span>;
}</span></code></pre></div></div></div><div id="code-box-components-table-demo-row-group" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-row-group">行分组</a></div></div><div class="code-box-demo"><div id="components-table-demo-row-group"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>根据某列的值进行行分组</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var commonData = {
  title: '一级标题',
  entity: '蚂蚁金服（中国）',
  institution: '招商银行丨杭州分行'
};

var companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];

var personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];

var mixArray = function mixArray(arr1, arr2) {
  var twoArray = arr1.map(function (item) {
    return arr2.map(function (i) {
      return _extends({}, item, i);
    });
  });
  var result = [];
  twoArray.forEach(function (item) {
    item.forEach(function (i) {
      result.push(i);
    });
  });
  return result;
};

//* 第一列为radio的demo

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var tableProps = {
        jsxcolumns: [{ dataKey: 'company', title: '公司', width: 200 }, { dataKey: 'title', title: '标题', width: 200 }, { dataKey: 'entity', title: '支付实体', width: 200 }, { dataKey: 'institution', title: '金融机构', width: 200 }, { dataKey: 'person', title: '申请人', width: 200 }],
        jsxdata: {
          data: mixArray(personData, companyData).map(function (item) {
            return _extends({}, item, commonData);
          })
        },
        className: 'kuma-uxtable-split-line',
        rowGroupKey: 'company',
        defaultRowGroupActiveKeys: 2,
        showColumnPicker: true
      };
      return React.createElement(_uxcore.Table, tableProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-row-group'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> commonData = {
  title: <span class="hljs-string">'一级标题'</span>,
  entity: <span class="hljs-string">'蚂蚁金服（中国）'</span>,
  institution: <span class="hljs-string">'招商银行丨杭州分行'</span>,
};

<span class="hljs-keyword">const</span> companyData = [
  { company: <span class="hljs-string">'阿里巴巴网络技术有限公司'</span> },
  { company: <span class="hljs-string">'蚂蚁金服有限公司'</span> },
  {},
];

<span class="hljs-keyword">const</span> personData = [
  { person: <span class="hljs-string">'Vernon Norman'</span> },
  { person: <span class="hljs-string">'David Hammond'</span> },
];

<span class="hljs-keyword">const</span> mixArray = (arr1, arr2) =&gt; {
  <span class="hljs-keyword">const</span> twoArray = arr1.map(item =&gt; arr2.map(i =&gt; ({ ...item, ...i })));
  <span class="hljs-keyword">const</span> result = [];
  twoArray.forEach((item) =&gt; {
    item.forEach((i) =&gt; {
      result.push(i);
    });
  });
  <span class="hljs-keyword">return</span> result;
};

<span class="hljs-comment">//* 第一列为radio的demo</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> tableProps = {
      jsxcolumns: [
        { dataKey: <span class="hljs-string">'company'</span>, title: <span class="hljs-string">'公司'</span>, width: <span class="hljs-number">200</span> },
        { dataKey: <span class="hljs-string">'title'</span>, title: <span class="hljs-string">'标题'</span>, width: <span class="hljs-number">200</span> },
        { dataKey: <span class="hljs-string">'entity'</span>, title: <span class="hljs-string">'支付实体'</span>, width: <span class="hljs-number">200</span> },
        { dataKey: <span class="hljs-string">'institution'</span>, title: <span class="hljs-string">'金融机构'</span>, width: <span class="hljs-number">200</span> },
        { dataKey: <span class="hljs-string">'person'</span>, title: <span class="hljs-string">'申请人'</span>, width: <span class="hljs-number">200</span> },
      ],
      jsxdata: {
        data: mixArray(personData, companyData).map(item =&gt; ({ ...item, ...commonData })),
      },
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      rowGroupKey: <span class="hljs-string">'company'</span>,
      defaultRowGroupActiveKeys: <span class="hljs-number">2</span>,
      showColumnPicker: <span class="hljs-literal">true</span>,
    };
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...tableProps</span>} /&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-row-group'));</span></code></pre></div><style type="text/css"></style><div class="highlight"><pre><code class="css"></code></pre></div></div></div><div id="code-box-components-table-demo-footer" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-footer">页底</a></div></div><div class="code-box-demo"><div id="components-table-demo-footer"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>提供一个空白行供自定义渲染，适用于 合计 等场景，同时支持行分组 Footer，可选择性关闭。</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var commonData = {
  title: '一级标题',
  entity: '蚂蚁金服（中国）',
  institution: '招商银行丨杭州分行',
  money: '60000'
};

var companyData = [{ company: '阿里巴巴网络技术有限公司' }, { company: '蚂蚁金服有限公司' }, {}];

var personData = [{ person: 'Vernon Norman' }, { person: 'David Hammond' }];

var mixArray = function mixArray(arr1, arr2) {
  var twoArray = arr1.map(function (item) {
    return arr2.map(function (i) {
      return _extends({}, item, i);
    });
  });
  var result = [];
  twoArray.forEach(function (item) {
    item.forEach(function (i) {
      result.push(i);
    });
  });
  return result;
};

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo() {
    _classCallCheck(this, Demo);

    return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var tableProps = {
        jsxcolumns: [{ dataKey: 'company', title: '公司', width: '20%' }, { dataKey: 'title', title: '标题', width: '20%', fixed: true }, { dataKey: 'money', title: '金额', width: '20%', type: 'money' }, { dataKey: 'entity', title: '支付实体', width: '50%' }, { dataKey: 'institution', title: '金融机构', width: '20%' }, { dataKey: 'person', title: '申请人', width: '20%' }],
        jsxdata: {
          data: mixArray(personData, companyData).map(function (item) {
            return _extends({}, item, commonData);
          })
        },
        className: 'kuma-uxtable-split-line',
        rowGroupKey: 'company',
        footer: function footer(_ref) {
          var data = _ref.data,
              column = _ref.column,
              from = _ref.from,
              _ref$rowGroupData = _ref.rowGroupData,
              rowGroupData = _ref$rowGroupData === undefined ? {} : _ref$rowGroupData;

          if (column.dataKey === 'title') {
            return '合计';
          }
          if (column.dataKey === 'money') {
            var total = 0;
            if (from === 'rowGroup') {
              rowGroupData.items && rowGroupData.items.length && rowGroupData.items.forEach(function (rowData) {
                total += parseInt(rowData.money, 10);
              });
            } else {
              data.forEach(function (rowData) {
                total += parseInt(rowData.money, 10);
              });
            }

            return _uxcore.Formatter.money(total.toString(), ',');
          }
          return null;
        },
        // width: 600,
        size: 'small',
        showRowGroupFooter: true
        // height: 300,
      };
      return React.createElement(_uxcore.Table, tableProps);
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-footer'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Formatter } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> commonData = {
  title: <span class="hljs-string">'一级标题'</span>,
  entity: <span class="hljs-string">'蚂蚁金服（中国）'</span>,
  institution: <span class="hljs-string">'招商银行丨杭州分行'</span>,
  money: <span class="hljs-string">'60000'</span>,
};

<span class="hljs-keyword">const</span> companyData = [
  { company: <span class="hljs-string">'阿里巴巴网络技术有限公司'</span> },
  { company: <span class="hljs-string">'蚂蚁金服有限公司'</span> },
  {},
];

<span class="hljs-keyword">const</span> personData = [
  { person: <span class="hljs-string">'Vernon Norman'</span> },
  { person: <span class="hljs-string">'David Hammond'</span> },
];

<span class="hljs-keyword">const</span> mixArray = (arr1, arr2) =&gt; {
  <span class="hljs-keyword">const</span> twoArray = arr1.map(item =&gt; arr2.map(i =&gt; ({ ...item, ...i })));
  <span class="hljs-keyword">const</span> result = [];
  twoArray.forEach((item) =&gt; {
    item.forEach((i) =&gt; {
      result.push(i);
    });
  });
  <span class="hljs-keyword">return</span> result;
};

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">const</span> tableProps = {
      jsxcolumns: [
        { dataKey: <span class="hljs-string">'company'</span>, title: <span class="hljs-string">'公司'</span>, width: <span class="hljs-string">'20%'</span> },
        { dataKey: <span class="hljs-string">'title'</span>, title: <span class="hljs-string">'标题'</span>, width: <span class="hljs-string">'20%'</span>, fixed: <span class="hljs-literal">true</span> },
        { dataKey: <span class="hljs-string">'money'</span>, title: <span class="hljs-string">'金额'</span>, width: <span class="hljs-string">'20%'</span>, type: <span class="hljs-string">'money'</span> },
        { dataKey: <span class="hljs-string">'entity'</span>, title: <span class="hljs-string">'支付实体'</span>, width: <span class="hljs-string">'50%'</span> },
        { dataKey: <span class="hljs-string">'institution'</span>, title: <span class="hljs-string">'金融机构'</span>, width: <span class="hljs-string">'20%'</span> },
        { dataKey: <span class="hljs-string">'person'</span>, title: <span class="hljs-string">'申请人'</span>, width: <span class="hljs-string">'20%'</span> },
      ],
      jsxdata: {
        data: mixArray(personData, companyData).map(item =&gt; ({ ...item, ...commonData })),
      },
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
      rowGroupKey: <span class="hljs-string">'company'</span>,
      footer: ({ data, column, from, rowGroupData = {} }) =&gt; {
        <span class="hljs-keyword">if</span> (column.dataKey === <span class="hljs-string">'title'</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">'合计'</span>;
        }
        <span class="hljs-keyword">if</span> (column.dataKey === <span class="hljs-string">'money'</span>) {
          <span class="hljs-keyword">let</span> total = <span class="hljs-number">0</span>;
          <span class="hljs-keyword">if</span> (from === <span class="hljs-string">'rowGroup'</span>) {
            rowGroupData.items &amp;&amp; rowGroupData.items.length &amp;&amp; rowGroupData.items.forEach((rowData) =&gt; {
              total += <span class="hljs-built_in">parseInt</span>(rowData.money, <span class="hljs-number">10</span>);
            });
          } <span class="hljs-keyword">else</span> {
            data.forEach((rowData) =&gt; {
              total += <span class="hljs-built_in">parseInt</span>(rowData.money, <span class="hljs-number">10</span>);
            });
          }

          <span class="hljs-keyword">return</span> Formatter.money(total.toString(), <span class="hljs-string">','</span>);
        }
        <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
      },
      <span class="hljs-comment">// width: 600,</span>
      size: <span class="hljs-string">'small'</span>,
      showRowGroupFooter: <span class="hljs-literal">true</span>,
      <span class="hljs-comment">// height: 300,</span>
    };
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...tableProps</span>} /&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-footer'));</span></code></pre></div><style type="text/css"></style><div class="highlight"><pre><code class="css"></code></pre></div></div></div><div id="code-box-components-table-demo-actionbar" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-actionbar">顶部操作栏</a></div></div><div class="code-box-demo"><div id="components-table-demo-actionbar"></div></div><div title="点击查看详细代码" class="code-box-desc">
<p>顶部操作栏</p>
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      data: props.data,
      text: 1,
      columns: [{
        dataKey: 'firstName',
        title: React.createElement(
          'span',
          null,
          '\u81EA\u5B9A\u4E49\u5217\u5934'
        ),
        // fixed: true,
        // width: '15%',
        filters: [{
          text: 'Joe',
          value: 'Joe'
        }, {
          text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
          value: 'Jim'
        }, {
          text: 'Submenu',
          value: 'Submenu',
          children: [{
            text: 'Green',
            value: 'Green'
          }, {
            text: 'Black',
            value: 'Black'
          }]
        }],
        message: '这是一个提示',
        ordered: true
      }, {
        dataKey: 'lastName',
        title: 'LastName',
        message: 'nihao',
        isDisable: function isDisable() {
          return true;
        }
        // fixed: true,
        // rightFixed: true
        // width: '55%',
      }, {
        dataKey: 'email',
        title: 'Email',
        // width: '30%',
        ordered: true,
        message: 'sadfsdf\nnsafdasdfasdf'
      }, {
        title: '操作1',
        width: '200px',
        type: 'action',
        // fixed: false,
        actions: [{
          title: 'click',
          callback: function callback() {},
          mode: 'edit'
        }, {
          title: '删除',
          callback: function callback() {},
          mode: 'view'
        }, {
          title: 'view',
          callback: function callback() {},
          mode: 'edit'
        }, {
          title: 'view',
          callback: function callback() {}
        }]
      }]
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var me = this;
      var columns = this.state.columns;
      // 通过 rowSelection 对象表明需要行选择

      var rowSelection = {
        onSelect: function onSelect(record, selected, selectedRows) {
          console.log(record, selected, selectedRows);
        },
        onSelectAll: function onSelectAll(selected, selectedRows) {
          console.log(selected, selectedRows);
        }
      };
      var fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
      var renderProps = {
        height: 400,
        pagerSizeOptions: [5, 10, 15, 20],
        useListActionBar: true,
        actionBar: {
          className: 'my-list-action-bar',
          // 是否显示全选
          showSelectAll: true,
          // 按钮配置
          buttons: [{
            title: 'Action Button',
            render: function render() {
              return React.createElement(
                _uxcore.Button,
                null,
                'Button1'
              );
            },

            keepActiveInCustomView: false,
            callback: function callback() {
              console.log(me.table.getData());
            }
          }, {
            title: '按钮',
            keepActiveInCustomView: false,
            // size: 'large',
            type: 'primary',
            // className: 'xxxxx',
            callback: function callback() {
              me.table.selectAll(true);
            }
          }],
          // 文案提示
          actionBarTip: '已找到记录123条',
          // 自定义内容
          customBarItem: {
            render: function render() {
              return React.createElement(
                'p',
                { style: { color: 'red' }, onClick: function onClick(e) {
                    console.log(e);
                  } },
                '\u81EA\u5B9A\u4E49\u5185\u5BB9'
              );
            }
          },
          // 行排序
          rowOrder: {
            iconName: 'paixu-jiangxu',
            // keepActiveInCustomView: true,
            defaultValue: {
              text: '排序方式一',
              value: '123'
            },
            items: [{
              text: '排序方式一',
              value: '123'
            }, {
              text: '排序方式二',
              value: '456'
            }],
            onChange: function onChange(data) {
              console.log(data);
            }
          },
          // 列排序
          columnsOrder: {
            iconName: 'huxiangguanzhu',
            // keepActiveInCustomView: true,
            title: '列排序',
            includeActionColumn: false, // 优先级低于fixed和rightFixed
            onChange: function onChange(dragInfo, data) {
              console.log(data);
            }
          },
          // 列选择
          columnsPicker: {
            iconName: 'zidingyilie',
            title: '自定义列',
            keepActiveInCustomView: false,
            setPickerGroups: function setPickerGroups(columns) {
              return [{
                title: '分组1',
                columns: columns.filter(function (item, index) {
                  return index >= 1;
                })
              }, {
                title: '分组2',
                columns: columns.filter(function (item, index) {
                  return index <= 0;
                })
              }];
            },
            onChange: function onChange(data) {
              console.log(data);
            }
          },
          // 自定义视图，支持返回promise和component
          // customView: {
          //   render(data, currentPage) {
          //     console.log(data, currentPage);
          //     // return (
          //     //   <Test name={'自定义的View'}/>
          //     // )
          //     return new Promise(function(resolve) {
          //       setTimeout(() => {
          //         resolve(<Test name={'自定义的View'}/>)
          //       })
          //     })
          //   }
          // },
          // 是否显示翻页器
          showMiniPager: true,
          search: {
            // placeholder: '请输入搜索关键字',
            onSearch: function onSearch() {
              console.log(234234);
            }
          },
          // 在自定义视图下移出翻页器
          removePagerInCustomView: true,
          linkBar: [{
            title: '修改columns',
            callback: function callback() {
              _this2.setState({
                columns: _this2.state.columns.filter(function (item) {
                  return item.title === 'LastName' || item.title === 'Email' || item.title === '操作1';
                })
              });
            }
          }]
        },
        showSearch: false,
        showColumnPicker: true,
        fetchUrl: fetchUrl,
        rowSelector: 'checkboxSelector',
        jsxcolumns: columns,
        rowSelection: rowSelection
      };
      return React.createElement(
        'div',
        null,
        React.createElement(_uxcore.Table, _extends({ ref: function ref(c) {
            _this2.table = c;
          } }, renderProps, { className: 'kuma-uxtable-border-line' }))
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-actionbar'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Button } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      data: props.data,
      text: <span class="hljs-number">1</span>,
      columns: [
        {
         dataKey: <span class="hljs-string">'firstName'</span>,
         title: <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>自定义列头<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>,
         // fixed: true,
         // width: '15%',
         filters: [{
           text: 'Joe',
           value: 'Joe',
         }, {
           text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
           value: 'Jim',
         }, {
           text: 'Submenu',
           value: 'Submenu',
           children: [{
             text: 'Green',
             value: 'Green',
           }, {
             text: 'Black',
             value: 'Black',
           }],
         }],
         message: '这是一个提示',
         ordered: true,
        },

        {
         dataKey: 'lastName',
         title: 'LastName',
         message: 'nihao',
         isDisable: function() {
           return true
         },
         // fixed: true,
         // rightFixed: true
         // width: '55%',
        },
        {
         dataKey: 'email',
         title: 'Email',
         // width: '30%',
         ordered: true,
         message: `sadfsdf\nnsafdasdfasdf`
        },
        {
         title: '操作1',
         width: '200px',
         type: 'action',
         // fixed: false,
         actions: [{
           title: 'click',
           callback: () =&gt; {
           },
           mode: 'edit',
         }, {
           title: '删除',
           callback: () =&gt; {
           },
           mode: 'view',
         }, {
           title: 'view',
           callback: () =&gt; { },
           mode: 'edit',
         }, {
           title: 'view',
           callback: () =&gt; { },
         }],
        },
      ]
    };
  }
  render() {
    const me = this;
    const { columns } = this.state
    // 通过 rowSelection 对象表明需要行选择
    const rowSelection = {
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows) {
        console.log(selected, selectedRows);
      },
    };
    const fetchUrl = 'http://eternalsky.me:8122/file/getGridJson.jsonp';
    const renderProps = {
      height: 400,
      pagerSizeOptions: [5, 10, 15, 20],
      useListActionBar: true,
    actionBar: {
      className: 'my-list-action-bar',
      // 是否显示全选
      showSelectAll: true,
      // 按钮配置
      buttons: [
        {
          title: 'Action Button',
          render() {
            return (
              <span class="hljs-tag">&lt;<span class="hljs-title">Button</span>&gt;</span>Button1<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
            )</span>
          },
          keepActiveInCustomView: <span class="hljs-literal">false</span>,
          callback: () =&gt; {
            <span class="hljs-built_in">console</span>.log(me.table.getData());
          },
        },
        {
          title: <span class="hljs-string">'按钮'</span>,
          keepActiveInCustomView: <span class="hljs-literal">false</span>,
          <span class="hljs-comment">// size: 'large',</span>
          type: <span class="hljs-string">'primary'</span>,
          <span class="hljs-comment">// className: 'xxxxx',</span>
          callback: () =&gt; {
            me.table.selectAll(<span class="hljs-literal">true</span>);
          }
        }
      ],
      <span class="hljs-comment">// 文案提示</span>
      actionBarTip: <span class="hljs-string">'已找到记录123条'</span>,
      <span class="hljs-comment">// 自定义内容</span>
      customBarItem: {
        render() {
          <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{color:</span> '<span class="hljs-attribute">red</span>'}} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{(e)</span> =&gt;</span> {console.log(e)}}&gt;自定义内容<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
          )</span>
        }
      },
      <span class="hljs-comment">// 行排序</span>
      rowOrder: {
        iconName: <span class="hljs-string">'paixu-jiangxu'</span>,
        <span class="hljs-comment">// keepActiveInCustomView: true,</span>
        defaultValue: {
          text: <span class="hljs-string">'排序方式一'</span>,
          value: <span class="hljs-string">'123'</span>
        },
        items: [
          {
            text: <span class="hljs-string">'排序方式一'</span>,
            value: <span class="hljs-string">'123'</span>
          },
          {
            text: <span class="hljs-string">'排序方式二'</span>,
            value: <span class="hljs-string">'456'</span>
          }
        ],
        onChange(data) {
          <span class="hljs-built_in">console</span>.log(data)
        }
      },
      <span class="hljs-comment">// 列排序</span>
      columnsOrder: {
        iconName: <span class="hljs-string">'huxiangguanzhu'</span>,
        <span class="hljs-comment">// keepActiveInCustomView: true,</span>
        title: <span class="hljs-string">'列排序'</span>,
        includeActionColumn: <span class="hljs-literal">false</span>,  <span class="hljs-comment">// 优先级低于fixed和rightFixed</span>
        onChange(dragInfo, data) {
          <span class="hljs-built_in">console</span>.log(data)
        }
      },
      <span class="hljs-comment">// 列选择</span>
      columnsPicker: {
        iconName: <span class="hljs-string">'zidingyilie'</span>,
        title: <span class="hljs-string">'自定义列'</span>,
        keepActiveInCustomView: <span class="hljs-literal">false</span>,
        setPickerGroups(columns) {
          <span class="hljs-keyword">return</span> [
            {
              title: <span class="hljs-string">'分组1'</span>,
              columns: columns.filter((item, index) =&gt; {<span class="hljs-keyword">return</span> index &gt;= <span class="hljs-number">1</span>})
            },
            {
              title: <span class="hljs-string">'分组2'</span>,
              columns: columns.filter((item, index) =&gt; {<span class="hljs-keyword">return</span> index &lt;= <span class="hljs-number">0</span>})
            }
          ]
        },
        onChange(data) {
          <span class="hljs-built_in">console</span>.log(data)
        }
      },
      <span class="hljs-comment">// 自定义视图，支持返回promise和component</span>
      <span class="hljs-comment">// customView: {</span>
      <span class="hljs-comment">//   render(data, currentPage) {</span>
      <span class="hljs-comment">//     console.log(data, currentPage);</span>
      <span class="hljs-comment">//     // return (</span>
      <span class="hljs-comment">//     //   &lt;Test name={'自定义的View'}/&gt;</span>
      <span class="hljs-comment">//     // )</span>
      <span class="hljs-comment">//     return new Promise(function(resolve) {</span>
      <span class="hljs-comment">//       setTimeout(() =&gt; {</span>
      <span class="hljs-comment">//         resolve(&lt;Test name={'自定义的View'}/&gt;)</span>
      <span class="hljs-comment">//       })</span>
      <span class="hljs-comment">//     })</span>
      <span class="hljs-comment">//   }</span>
      <span class="hljs-comment">// },</span>
      <span class="hljs-comment">// 是否显示翻页器</span>
      showMiniPager: <span class="hljs-literal">true</span>,
      search: {
        <span class="hljs-comment">// placeholder: '请输入搜索关键字',</span>
        onSearch() {
          <span class="hljs-built_in">console</span>.log(<span class="hljs-number">234234</span>)
        }
      },
      <span class="hljs-comment">// 在自定义视图下移出翻页器</span>
      removePagerInCustomView: <span class="hljs-literal">true</span>,
      linkBar: [
        {
          title: <span class="hljs-string">'修改columns'</span>,
          callback: () =&gt; {
            <span class="hljs-keyword">this</span>.setState({
              columns: <span class="hljs-keyword">this</span>.state.columns.filter(item =&gt; {
                <span class="hljs-keyword">return</span> item.title === <span class="hljs-string">'LastName'</span>
                  || item.title === <span class="hljs-string">'Email'</span>
                  || item.title === <span class="hljs-string">'操作1'</span>
              })
            })
          },
        }
      ],
    },
      showSearch: <span class="hljs-literal">false</span>,
      showColumnPicker: <span class="hljs-literal">true</span>,
      fetchUrl,
      rowSelector: <span class="hljs-string">'checkboxSelector'</span>,
      jsxcolumns: columns,
      rowSelection,
    };
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Table</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">{c</span> =&gt;</span> {this.table = c}} {...renderProps} className="kuma-uxtable-border-line" /&gt;
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-actionbar'));</span></code></pre></div></div></div><div id="code-box-components-table-demo-actioncolumn" class="code-box"><div class="code-box-meta"><div class="code-box-title"><i class="fa fa-tag"></i><a href="#code-box-components-table-demo-actioncolumn">操作列</a></div></div><div class="code-box-demo"><div id="components-table-demo-actioncolumn"></div></div><div title="点击查看详细代码" class="code-box-desc">
<a class="code-toggle"><i class="kuma-icon kuma-icon-chevron-down"></i></a></div><div class="code-box-markdown"><script>(function(){'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _uxcore = require('uxcore');

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var InputFormField = _uxcore.Form.InputFormField,
    FormRow = _uxcore.Form.FormRow,
    RadioGroupFormField = _uxcore.Form.RadioGroupFormField;
var RadioItem = RadioGroupFormField.Item;

var mockData = {
  data: [{
    email: 'xw@abc.com',
    nameId: 'xiaowang',
    name: '小王',
    cityId: 'bj',
    city: '北京'
  }, {
    email: 'xl@abc.com',
    nameId: 'xiaoli',
    name: '小李',
    cityId: 'hz',
    city: '杭州'
  }],
  currentPage: 2,
  totalCount: 30
};

var Demo = function (_React$Component) {
  _inherits(Demo, _React$Component);

  function Demo(props) {
    _classCallCheck(this, Demo);

    var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));

    _this.state = {
      data: mockData,
      showOtherColumn: false,
      value: {
        num: 1,
        action: 'link'
      }
    };
    return _this;
  }

  _createClass(Demo, [{
    key: 'handleChange',
    value: function handleChange(value) {
      this.setState({
        value: value
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var columns = [{
        dataKey: 'jsxid',
        title: 'jsxid2',
        width: 80
      }, {
        dataKey: 'city',
        editKey: 'cityId',
        title: '城市',
        width: 200
      }, {
        dataKey: 'name',
        editKey: 'nameId',
        title: '姓名',
        width: 200
      }, {
        dataKey: 'email',
        title: 'Email',
        width: 200
      }, {
        dataKey: 'action1',
        title: '操作1',
        width: 280,
        type: 'action',
        actionType: this.state.value.action,
        collapseNum: this.state.value.num || 3, // 超过 3 个将开始折叠
        actions: [{
          title: '操作一',
          callback: function callback(rowData) {
            console.log(rowData);
          }
        }, {
          title: '操作二',
          callback: function callback(rowData) {
            console.log(rowData);
          }
        }, {
          title: '禁用',
          callback: function callback(rowData) {
            console.log(rowData);
          },
          isDisable: function isDisable() {
            return true;
          }
        }, {
          title: '操作四',
          callback: function callback(rowData) {
            console.log(rowData);
          }
        }, {
          title: '操作五',
          callback: function callback(rowData) {
            console.log(rowData);
          }
        }]
      }];

      var renderProps = {
        jsxdata: mockData,
        jsxcolumns: columns,
        showPager: false,
        className: 'kuma-uxtable-split-line'
      };

      return React.createElement(
        'div',
        null,
        React.createElement(
          _uxcore.Form,
          { jsxonChange: this.handleChange.bind(this), jsxvalues: this.state.value },
          React.createElement(
            FormRow,
            { totalFlex: 3 },
            React.createElement(InputFormField, { jsxname: 'num', jsxlabel: '\u6298\u53E0\u7684\u4E2A\u6570' }),
            React.createElement(
              RadioGroupFormField,
              { jsxname: 'action', jsxlabel: '\u6837\u5F0F\u98CE\u683C' },
              React.createElement(RadioItem, { value: 'button', text: '\u6309\u94AE' }),
              React.createElement(RadioItem, { value: 'link', text: '\u94FE\u63A5' })
            )
          )
        ),
        React.createElement(_uxcore.Table, renderProps)
      );
    }
  }]);

  return Demo;
}(React.Component);

ReactDOM.render(React.createElement(Demo, null), document.getElementById('components-table-demo-actioncolumn'));})()</script><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">import</span> { Table } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;
<span class="hljs-keyword">import</span> { Form } <span class="hljs-keyword">from</span> <span class="hljs-string">'uxcore'</span>;

<span class="hljs-keyword">const</span> {
  InputFormField,
  FormRow,
  RadioGroupFormField,
} = Form;

<span class="hljs-keyword">const</span> { Item: RadioItem } = RadioGroupFormField;
<span class="hljs-keyword">const</span> mockData = {
  data: [
    {
      email: <span class="hljs-string">'xw@abc.com'</span>,
      nameId: <span class="hljs-string">'xiaowang'</span>,
      name: <span class="hljs-string">'小王'</span>,
      cityId: <span class="hljs-string">'bj'</span>,
      city: <span class="hljs-string">'北京'</span>,
    },
    {
      email: <span class="hljs-string">'xl@abc.com'</span>,
      nameId: <span class="hljs-string">'xiaoli'</span>,
      name: <span class="hljs-string">'小李'</span>,
      cityId: <span class="hljs-string">'hz'</span>,
      city: <span class="hljs-string">'杭州'</span>,
    },
  ],
  currentPage: <span class="hljs-number">2</span>,
  totalCount: <span class="hljs-number">30</span>,
};

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Demo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{

  constructor(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = {
      data: mockData,
      showOtherColumn: <span class="hljs-literal">false</span>,
      value: {
        num: <span class="hljs-number">1</span>,
        action: <span class="hljs-string">'link'</span>,
      },
    };
  }

  handleChange(value) {
    <span class="hljs-keyword">this</span>.setState({
      value,
    });
  }

  render() {
    <span class="hljs-keyword">const</span> columns = [
      {
        dataKey: <span class="hljs-string">'jsxid'</span>,
        title: <span class="hljs-string">'jsxid2'</span>,
        width: <span class="hljs-number">80</span>,
      },
      {
        dataKey: <span class="hljs-string">'city'</span>,
        editKey: <span class="hljs-string">'cityId'</span>,
        title: <span class="hljs-string">'城市'</span>,
        width: <span class="hljs-number">200</span>,
      },
      {
        dataKey: <span class="hljs-string">'name'</span>,
        editKey: <span class="hljs-string">'nameId'</span>,
        title: <span class="hljs-string">'姓名'</span>,
        width: <span class="hljs-number">200</span>,
      },
      {
        dataKey: <span class="hljs-string">'email'</span>,
        title: <span class="hljs-string">'Email'</span>,
        width: <span class="hljs-number">200</span>,
      },
      {
        dataKey: <span class="hljs-string">'action1'</span>,
        title: <span class="hljs-string">'操作1'</span>,
        width: <span class="hljs-number">280</span>,
        type: <span class="hljs-string">'action'</span>,
        actionType: <span class="hljs-keyword">this</span>.state.value.action,
        collapseNum: <span class="hljs-keyword">this</span>.state.value.num || <span class="hljs-number">3</span>, <span class="hljs-comment">// 超过 3 个将开始折叠</span>
        actions: [
          {
            title: <span class="hljs-string">'操作一'</span>,
            callback: (rowData) =&gt; { <span class="hljs-built_in">console</span>.log(rowData); },
          },
          {
            title: <span class="hljs-string">'操作二'</span>,
            callback: (rowData) =&gt; { <span class="hljs-built_in">console</span>.log(rowData); },
          },
          {
            title: <span class="hljs-string">'禁用'</span>,
            callback: (rowData) =&gt; { <span class="hljs-built_in">console</span>.log(rowData); },
            isDisable: () =&gt; <span class="hljs-literal">true</span>,
          },
          {
            title: <span class="hljs-string">'操作四'</span>,
            callback: (rowData) =&gt; { <span class="hljs-built_in">console</span>.log(rowData); },
          },
          {
            title: <span class="hljs-string">'操作五'</span>,
            callback: (rowData) =&gt; { <span class="hljs-built_in">console</span>.log(rowData); },
          },
        ],
      },
    ];

    <span class="hljs-keyword">const</span> renderProps = {
      jsxdata: mockData,
      jsxcolumns: columns,
      showPager: <span class="hljs-literal">false</span>,
      className: <span class="hljs-string">'kuma-uxtable-split-line'</span>,
    };

    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Form</span> <span class="hljs-attribute">jsxonChange</span>=<span class="hljs-value">{this.handleChange.bind(this)}</span> <span class="hljs-attribute">jsxvalues</span>=<span class="hljs-value">{this.state.value}</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">FormRow</span> <span class="hljs-attribute">totalFlex</span>=<span class="hljs-value">{3}</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">InputFormField</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"num"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"折叠的个数"</span> /&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">RadioGroupFormField</span> <span class="hljs-attribute">jsxname</span>=<span class="hljs-value">"action"</span> <span class="hljs-attribute">jsxlabel</span>=<span class="hljs-value">"样式风格"</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">RadioItem</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"按钮"</span> /&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-title">RadioItem</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"link"</span> <span class="hljs-attribute">text</span>=<span class="hljs-value">"链接"</span> /&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">RadioGroupFormField</span>&gt;</span>
          <span class="hljs-tag">&lt;/<span class="hljs-title">FormRow</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">Form</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">Table</span> {<span class="hljs-attribute">...renderProps</span>} /&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    )</span>;
  }
}

ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Demo</span> /&gt;</span>, document.getElementById('components-table-demo-actioncolumn'));</span></code></pre></div></div></div><div id="J-markdown" class="markdown-body"><h2 id="api">API</h2><h3 id="行内编辑用">行内编辑用</h3><ul>
<li>getData(): 返回表格的数据，并作校验。</li>
<li>addEmptyRow(): 添加一个空的新行。</li>
<li>addRow(rowData): 以指定数据添加一个新行。</li>
<li>delRow(rowData): 删除一个新行。</li>
<li>editRow(rowData): 使指定的行切换到编辑模式。</li>
<li>editAllRow(): 使所有行切换到编辑模式。</li>
<li>viewRow(rowData): 使指定的行切换到查看模式。</li>
<li>viewAllRow(): 使所有行切换到查看模式。</li>
<li>saveRow(rowData): 保存行的数据(同时切换至查看模式)。</li>
<li>saveAllRow(): 保存所有行的数据(同时切换至查看模式)。</li>
<li>resetRow(rowData): 重置行到数据（若保存过，则为保存过后的数据）。</li>
<li>resetAllRow(): 重置所有行的数据（若保存过，则为保存过后的数据）。</li>
<li>resetAndViewAllRow(): 重置所有行数据（若保存过，则为保存过后的数据）并切换至查看模式。</li>
</ul>
<h3 id="获取数据">获取数据</h3><ul>
<li>fetchData(from): 使表格重新请求一次数据。<ul>
<li>@param from {string} {optional}: 这个参数会传入到 beforeFetch 的回调中。</li>
</ul>
</li>
</ul>
<h3 id="创建一个-cellfield">创建一个 CellField</h3><ul>
<li>createCellField(options)</li>
</ul>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Default</th>
<th>Since Ver.</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>options.component</td>
<td>React Element</td>
<td>yes</td>
<td>input</td>
<td>1.12.8</td>
<td>被包裹的组件，需要提供 value 和 onChange，或相同功能的 API</td>
</tr>
<tr>
<td>options.valuePropName</td>
<td>string</td>
<td>No</td>
<td>value</td>
<td>1.12.8</td>
<td>与 value 对应的 prop 名字</td>
</tr>
<tr>
<td>options.changePropName</td>
<td>string</td>
<td>No</td>
<td>onChange</td>
<td>1.12.8</td>
<td>与 onChange 对应的 prop 名字</td>
</tr>
<tr>
<td>options.processValue</td>
<td>func</td>
<td>No</td>
<td>-</td>
<td>1.12.8</td>
<td>针对 value（editKey 对应字段）的处理函数</td>
</tr>
<tr>
<td>options.processText</td>
<td>func</td>
<td>No</td>
<td>-</td>
<td>1.12.8</td>
<td>针对 text (dataKey 对应字段) 的处理函数</td>
</tr>
</tbody>
</table>
<h3 id="树形表格用">树形表格用</h3><ul>
<li>addSubRow(subRowData, rowData, cb): 树形表格模式下从底部插入一个子树节点行</li>
<li>addSubRowFromTop(subRowData, rowData, cb): 树形表格模式下从顶部插入一个子树节点行</li>
<li>updateRow(rowData, cb): 树形表格模式下更新当前行</li>
</ul>
<h3 id="其他">其他</h3><ul>
<li>toggleSubComp(rowData): 使指定的行显示或隐藏二级组件(subComp)。</li>
<li>moveRowUp(rowData): 使指定的行向上移动一行</li>
<li>moveRowDown(rowData): 使指定的行向下移动一行</li>
</ul>
<h2 id="props">Props</h2><table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Default</th>
<th>Since Ver.</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>jsxcolumns</td>
<td>array</td>
<td>required</td>
<td>null</td>
<td>-</td>
<td>表格列配置项，具体见<a href="#jsxcolumns">这里</a></td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>optional</td>
<td>1000</td>
<td>-</td>
<td>表格的宽度</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>optional</td>
<td>100%</td>
<td>-</td>
<td>表格的高度</td>
</tr>
<tr>
<td>showColumnPicker</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>-</td>
<td>是否显示列筛选按钮</td>
</tr>
<tr>
<td>showPager</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>-</td>
<td>是否显示分页</td>
</tr>
<tr>
<td>showPagerTotal</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>1.3.17</td>
<td>是否显示分页的总数部分</td>
</tr>
<tr>
<td>showPagerSizeChanger</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>1.6.9</td>
<td>是否可以改变分页的pageSize</td>
</tr>
<tr>
<td>isMiniPager</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>1.6.9</td>
<td>分页是否是mini的</td>
</tr>
<tr>
<td>showHeader</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>-</td>
<td>是否显示表格头部</td>
</tr>
<tr>
<td>showHeaderBorder</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>1.3.6</td>
<td>是否显示头部列之间的分割线</td>
</tr>
<tr>
<td>showMask</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>-</td>
<td>是否在 loading 的时候显示蒙层</td>
</tr>
<tr>
<td>showSearch</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>-</td>
<td>是否显示内置的搜索栏</td>
</tr>
<tr>
<td>doubleClickToEdit</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>-</td>
<td>是否开启双击编辑</td>
</tr>
<tr>
<td>fetchDataOnMount</td>
<td>boolean</td>
<td>optional</td>
<td>true</td>
<td>1.3.18</td>
<td>是否在组件 Mount 时立刻获取一次数据</td>
</tr>
<tr>
<td>rowSelector</td>
<td>string</td>
<td>optional</td>
<td>复选</td>
<td>1.3.20</td>
<td>行选择是复选还是单选，支持 checkboxSelector 和 radioSelector</td>
</tr>
<tr>
<td>locale</td>
<td>string</td>
<td>optional</td>
<td>zh-cn</td>
<td>1.3.17</td>
<td>国家化，目前支持 zh-cn/en-us</td>
</tr>
<tr>
<td>emptyText</td>
<td>string or element</td>
<td>optional</td>
<td>&quot;暂无数据&quot;</td>
<td>-</td>
<td>当没有数据时 Table 展示的文案</td>
</tr>
<tr>
<td>searchBarPlaceholder</td>
<td>string</td>
<td>optional</td>
<td>&quot;搜索表格内容&quot;</td>
<td>1.3.0</td>
<td>searchBar 的占位符</td>
</tr>
<tr>
<td>loadingText</td>
<td>string</td>
<td>optional</td>
<td>&quot;loading&quot;</td>
<td>1.4.4</td>
<td>加载数据时的文案</td>
</tr>
<tr>
<td>headerHeight</td>
<td>number</td>
<td>optional</td>
<td>40</td>
<td>-</td>
<td>表格头部的高度</td>
</tr>
<tr>
<td>pageSize</td>
<td>number</td>
<td>optional</td>
<td>10</td>
<td>-</td>
<td>每页显示多少条数据</td>
</tr>
<tr>
<td>pagerSizeOptions</td>
<td>array</td>
<td>optional</td>
<td>[10,20,30,40]</td>
<td>-</td>
<td>显示的可选 pageSize</td>
</tr>
<tr>
<td>queryKeys</td>
<td>array</td>
<td>optional</td>
<td>[]</td>
<td>-</td>
<td>有哪些数据会传递给 subComp</td>
</tr>
<tr>
<td>jsxdata</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>-</td>
<td>在远端数据还没有返回时用作默认数据</td>
</tr>
<tr>
<td>fetchUrl</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>-</td>
<td>表格的数据源</td>
</tr>
<tr>
<td>fetchMethod</td>
<td>string</td>
<td>optional</td>
<td>&quot;&quot;</td>
<td>-</td>
<td>远程数据源请求方式</td>
</tr>
<tr>
<td>fetchParams</td>
<td>object</td>
<td>optional</td>
<td>-</td>
<td>-</td>
<td>表格在请求数据时，会额外附带的参数，具有最高的优先级</td>
</tr>
<tr>
<td>actionBar</td>
<td>object/array</td>
<td>optional</td>
<td>null</td>
<td>-</td>
<td>表格内置的操作条配置，详细<a href="#actionbar">见此</a></td>
</tr>
<tr>
<td>beforeFetch</td>
<td>function(data, from)</td>
<td>optional</td>
<td>noop</td>
<td>-</td>
<td>两个参数，data 表示表格请求数据时即将发送的参数，from 表示这次请求数据的行为从哪里产生，内置的有 <code>search</code>(搜索栏),<code>order</code>(排序) &amp; <code>pagination</code>(分页)，该函数需要返回值，返回值为真正请求所携带的参数。</td>
</tr>
<tr>
<td>processData</td>
<td>function(data)</td>
<td>optional</td>
<td>noop</td>
<td>-</td>
<td>有时源返回的数据格式，并不符合 Table 的要求，可以通过此函数进行调整，参数 data 是返回数据中 content 字段的 value，该函数需要返回值，返回值为符合 content 字段 value 的数据结构。</td>
</tr>
<tr>
<td>onFetchError</td>
<td>function(result)</td>
<td>optional</td>
<td>noop</td>
<td>1.3.7</td>
<td>在返回数据中 success 不是 true 的情况下触发，返回所有请求得到的数据</td>
</tr>
<tr>
<td>onSearch</td>
<td>function(searchTxt)</td>
<td>optional</td>
<td>noop</td>
<td>1.6.1</td>
<td>未配置 fetchUrl 的情况下触发，传回搜索的关键词</td>
</tr>
<tr>
<td>onOrder</td>
<td>function(column, orderType)</td>
<td>optional</td>
<td>noop</td>
<td>1.6.1</td>
<td>未配置 fetchUrl 的情况下触发，传回排序的列和排序方式</td>
</tr>
<tr>
<td>onPagerChange</td>
<td>function(current, pageSize)</td>
<td>optional</td>
<td>noop</td>
<td>1.6.1</td>
<td>未配置 fetchUrl 的情况下触发，传回要到达的分页和每页条数</td>
</tr>
<tr>
<td>addRowClassName</td>
<td>function(rowData)</td>
<td>optional</td>
<td>noop</td>
<td>-</td>
<td>用于为特定的某几行添加特殊的 class，用于样式定制</td>
</tr>
<tr>
<td>rowSelection</td>
<td>object</td>
<td>optional</td>
<td>noop</td>
<td>-</td>
<td>选中复选框时触发的回调，rowSelection 是由回调函数组成的对象，包括 onSelect 和 onSelectAll，例子见此</td>
</tr>
<tr>
<td>rowGroupKey</td>
<td>string</td>
<td>optional</td>
<td></td>
<td>8.2.0</td>
<td>用于行分组，可选值为 columns 设置中 dataKey，使用对应的列内容做行分组</td>
</tr>
<tr>
<td>defaultEditable</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>10.4.16</td>
<td>默认开启行编辑模式</td>
</tr>
<tr>
<td>useListActionBar</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>10.5.0</td>
<td>新版listActionBar开关，actionBar配置，详细<a href="#actionbar">见此</a></td>
</tr>
<tr>
<td>getTooltipContainer</td>
<td>function()</td>
<td>optional</td>
<td>null</td>
<td>10.5.2</td>
<td>单元格编辑状态下，tooltip位置可控</td>
</tr>
<tr>
<td>columnResizeable</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>10.5.9</td>
<td>表格列可拖拽</td>
</tr>
<tr>
<td>defaultRowGroupActiveKeys</td>
<td>number/array</td>
<td>optional</td>
<td>undefined</td>
<td>11.1.0</td>
<td>行分组默认展开设置，可设置指定分组展开或者设置总展开分组数</td>
</tr>
<tr>
<td>onRowGroupOpenChange</td>
<td>function(activeKeys, key)</td>
<td>optional</td>
<td>undefined</td>
<td>11.1.0</td>
<td>行分组展开状态变更回调</td>
</tr>
<tr>
<td>needCheckRightFixed</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>11.1.0</td>
<td>是否开启右固定列检查，用于解决可能产生两个右固定列的场景</td>
</tr>
<tr>
<td>fixHeaderToTop</td>
<td>boolean</td>
<td>optional</td>
<td>false</td>
<td>11.2.0</td>
<td>是否显示一个固定顶部的header，用于滚动等状态下的标题贴顶功能。存在固定列或者表格宽度超出视窗宽度时该配置无效。</td>
</tr>
<tr>
<td>fixHeaderOffset</td>
<td>number</td>
<td>optional</td>
<td>0</td>
<td>11.2.1</td>
<td>fixed 状态下的header距离顶部的偏移量</td>
</tr>
<tr>
<td>expandIconType</td>
<td>string</td>
<td>optional</td>
<td>undefined</td>
<td>11.3.0</td>
<td>树形和子表格模式下的展开按钮增加加减号样式 &#39;adderSubtractor&#39;</td>
</tr>
</tbody>
</table>
<h3 id="折叠展开专用">折叠展开专用</h3><table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Since Ver.</th>
<th>Default</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>SubComp</td>
<td>React Element</td>
<td>optional</td>
<td>-</td>
<td>-</td>
<td>传入二级组件，已废弃，请使用 renderSubComp, 自 1.7.0 版本后不再保证此部分功能的完整性。</td>
</tr>
<tr>
<td>renderSubComp</td>
<td>function(rowData)</td>
<td>optional</td>
<td>1.3.15</td>
<td>-</td>
<td>传入二级组件，该函数需要返回值，返回 false，表示不渲染二级，返回 jsx，则渲染该 jsx</td>
</tr>
</tbody>
</table>
<h3 id="tree-模式专用">Tree 模式专用</h3><table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Since Ver.</th>
<th>Default</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>renderModel</td>
<td>string</td>
<td>optional</td>
<td>-</td>
<td>&#39;&#39;</td>
<td>使用 tree 模式时，此项为 &#39;tree&#39;</td>
</tr>
<tr>
<td>levels</td>
<td>number</td>
<td>optional</td>
<td>-</td>
<td>0</td>
<td>tree 模式默认展开的级数</td>
</tr>
</tbody>
</table>
<h3 id="行内编辑表格专用">行内编辑表格专用</h3><table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Require</th>
<th>Since Ver.</th>
<th>Default</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>function(data)</td>
<td>optional</td>
<td>-</td>
<td>noop</td>
<td>有表格编辑行为触发，参数的数据格式为 {data: 表格的所有数据, changedData: 变动行的数据, dataKey: xxx, editKey: xxx, pass: 正在编辑的域是否通过校验}</td>
</tr>
<tr>
<td>getSavedData</td>
<td>boolean</td>
<td>optional</td>
<td>-</td>
<td>true</td>
<td>onChange 中的数据是否是保存之后的数据(通过了 saveRow() 的数据)</td>
</tr>
</tbody>
</table>
<h3 id="列配置项-jsxcolumns">列配置项(jsxcolumns)</h3><table>
<thead>
<tr>
<th>Key Name</th>
<th>Type</th>
<th>Since Ver.</th>
<th>Require</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataKey</td>
<td>string</td>
<td>-</td>
<td>required</td>
<td>表格的数据中用于查看模式展示的字段</td>
</tr>
<tr>
<td>editKey</td>
<td>string</td>
<td>-</td>
<td>optional</td>
<td>表格的数据中用于编辑模式的字段，如对于 select 来说，此项应为选项里的 key</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>-</td>
<td>optional</td>
<td>文字居中方式，同text-align属性，默认 &#39;left&#39;</td>
</tr>
<tr>
<td>title</td>
<td>string/func</td>
<td>-</td>
<td>required</td>
<td>列头标题，可以是个函数，根据返回值进行渲染</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>-</td>
<td>required</td>
<td>列宽</td>
</tr>
<tr>
<td>hidden</td>
<td>boolean</td>
<td>-</td>
<td>optional</td>
<td>是否隐藏，默认为 false</td>
</tr>
<tr>
<td>ordered</td>
<td>boolean</td>
<td>-</td>
<td>optional</td>
<td>是否显示内置的排序，默认为 false</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>-</td>
<td>optional</td>
<td>包含 &#39;money&#39;, &#39;card&#39;, &#39;cnmobile&#39;, &#39;checkboxSelector&#39;, &#39;action&#39;, &#39;radio&#39;, &#39;text&#39;, &#39;select&#39; 和 &#39;custom&#39;</td>
</tr>
<tr>
<td>actions</td>
<td>array</td>
<td>-</td>
<td>optional</td>
<td>当 type 是 action 的时候会用到，用于定义具体有哪些操作，格式见下方<a href="#actions">说明</a></td>
</tr>
<tr>
<td>collapseNum</td>
<td>number</td>
<td>1.9.4</td>
<td>optional</td>
<td>当 type 是 action 的时候会用到，默认 3，指定超过多少个 action 时折叠</td>
</tr>
<tr>
<td>actionType</td>
<td>string</td>
<td>1.9.4</td>
<td>optional</td>
<td>当 type 是 action 的时候会用到，默认 link，枚举值：link/button</td>
</tr>
<tr>
<td>customField</td>
<td>React Element</td>
<td>-</td>
<td>optional</td>
<td>当 type 是 custom 的时候会用到，用于传入自定义的 Field，用于行内编辑</td>
</tr>
<tr>
<td>render</td>
<td>function</td>
<td>-</td>
<td>optional</td>
<td>在查看模式下，用户定制渲染的方式，返回一个 jsx 格式</td>
</tr>
<tr>
<td>fixed</td>
<td>boolean</td>
<td>-</td>
<td>optional</td>
<td>是否固定在左侧，固定列不可以和折叠展开面板混合使用</td>
</tr>
<tr>
<td>rightFixed</td>
<td>boolean</td>
<td>1.14.0</td>
<td>optional</td>
<td>是否固定在右侧，固定列不可以和折叠展开面板混合使用</td>
</tr>
<tr>
<td>delimiter</td>
<td>string</td>
<td>-</td>
<td>optional</td>
<td>在 type 是 &#39;money&#39;, &#39;card&#39;, &#39;cnmobile&#39; 的时候会用到，用于传入格式化的分隔符</td>
</tr>
<tr>
<td>disable</td>
<td>boolean</td>
<td>-</td>
<td>optional</td>
<td>在 type 为 checkboxSelector 时使用，是否禁用 checkbox，优先级高于 isDisable</td>
</tr>
<tr>
<td>isDisable</td>
<td>function(rowData)</td>
<td>1.3.1</td>
<td>optional</td>
<td>在 tpye 为 checkboxSelector 时使用，为一个回调函数，用于根据 rowData 去判断是否禁用该行的 checkbox</td>
</tr>
<tr>
<td>canEdit</td>
<td>function(rowData)</td>
<td>1.3.3</td>
<td>optional</td>
<td>在 type 为可编辑表格的类别时使用，为一个回调函数，用于根据 rowData 去判断该行该列是否可以编辑</td>
</tr>
<tr>
<td>config</td>
<td>object</td>
<td>1.5.0</td>
<td>optional</td>
<td>在 type 为 text/select/radio 时使用，传入对应的配置项，配置项与对应的组件(uxcore-selelct2)相同</td>
</tr>
<tr>
<td>renderChildren</td>
<td>function</td>
<td>1.5.0</td>
<td>-</td>
<td>在 type 为 select/radio 时使用，通过返回 jsx 传入选项。</td>
</tr>
</tbody>
</table>
<h3 id="列配置项的例子">列配置项的例子</h3><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">const</span> columns = [
        { dataKey: <span class="hljs-string">'check'</span>, type: <span class="hljs-string">'checkbox'</span>, isDisable(rowData) { <span class="hljs-keyword">return</span> <span class="hljs-regexp">/city/</span>.test(rowData.city); } }, <span class="hljs-comment">// 定制 checkbox 列，dataKey 对应的应是一个 bool 值，表明是否被选中。</span>
        { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
  { dataKey: <span class="hljs-string">'action1'</span>,
    title: <span class="hljs-string">'操作1'</span>,
    width: <span class="hljs-number">100</span>,
    type: <span class="hljs-string">'action'</span>,
    actions: [
      {
        title: <span class="hljs-string">'编辑'</span>,
        callback: (rowData) =&gt; {
          me.refs.grid.editRow(rowData);
        },
        mode: Constants.MODE.VIEW,
      },
      {
        title: <span class="hljs-string">'保存'</span>,
        callback: (rowData) =&gt; {
          me.refs.grid.saveRow(rowData);
        },
        mode: Constants.MODE.EDIT,
      },
    ] },
  { dataKey: <span class="hljs-string">'action'</span>,
    title: <span class="hljs-string">'链接'</span>,
    width: <span class="hljs-number">100</span>,
    render(cellData, rowData) {
      <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>&gt;</span>{rowData.email}<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>;</span>
    } },
];
</code></pre></div><h2 id="列配置项的例子2（带列群组-since-ver-1-3-0）">列配置项的例子2（带列群组, since ver. 1.3.0）</h2><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">const</span> columns = [
        { dataKey: <span class="hljs-string">'check'</span>, type: <span class="hljs-string">'checkbox'</span>, disable: <span class="hljs-literal">false</span> }, <span class="hljs-comment">// custom checkbox column, dataKey can be anyone, true means checked.</span>
  {
    group: <span class="hljs-string">'国家'</span>,
    columns: [
                { dataKey: <span class="hljs-string">'country'</span>, title: <span class="hljs-string">'国家'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
                { dataKey: <span class="hljs-string">'country2'</span>, title: <span class="hljs-string">'国家2'</span>, width: <span class="hljs-number">200</span>, ordered: <span class="hljs-literal">true</span> },
    ],
  },
];
</code></pre></div><h2 id="rowselection-的例子">rowSelection 的例子</h2><div class="highlight"><pre><code class="javascript">
<span class="hljs-keyword">const</span> rowSelection = {
  onSelect(record, selected, selectedRows) {
    <span class="hljs-built_in">console</span>.log(record, selected, selectedRows);
  },
  onSelectAll(record, data) {
    <span class="hljs-built_in">console</span>.log(record, data);
  },
  isDisabled(rowData) {
    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
  },
};
</code></pre></div><h2 id="返回的数据格式">返回的数据格式</h2><ul>
<li>数据格式的约定<a href="http://gitlab.alibaba-inc.com/alinw/yosemite/issues/18">见此</a></li>
</ul>
<div class="highlight"><pre><code class="javascript">   {
    <span class="hljs-string">"content"</span>:{
        <span class="hljs-string">"data"</span>:[
            {
                <span class="hljs-string">"id"</span>:<span class="hljs-string">'1'</span>
                <span class="hljs-string">"grade"</span>:<span class="hljs-string">"grade1"</span>,
                <span class="hljs-string">"email"</span>:<span class="hljs-string">"email1"</span>,
                <span class="hljs-string">"firstName"</span>:<span class="hljs-string">"firstName1"</span>,
                <span class="hljs-string">"lastName"</span>:<span class="hljs-string">"lastName1"</span>,
                <span class="hljs-string">"birthDate"</span>:<span class="hljs-string">"birthDate1"</span>,
                <span class="hljs-string">"country"</span>:<span class="hljs-string">"country1"</span>,
                <span class="hljs-string">"city"</span>:<span class="hljs-string">"city1"</span>
            }
            ...

        ],
        <span class="hljs-string">"currentPage"</span>:<span class="hljs-number">1</span>,
        <span class="hljs-string">"totalCount"</span>:<span class="hljs-number">30</span>
    },
    <span class="hljs-string">"success"</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">"errorCode"</span>: <span class="hljs-string">""</span>,
    <span class="hljs-string">"errorMsg"</span>: <span class="hljs-string">""</span>
    }
</code></pre></div><blockquote>
<p>上面的数据格式是 ajax 返回的数据格式要求，如果你通过 jsxdata 传值，只需要 content 里面的内容。</p>
</blockquote>
<div class="highlight"><pre><code class="javascript">{
    <span class="hljs-string">"data"</span>:[
        {
            <span class="hljs-string">"id"</span>:<span class="hljs-string">'1'</span>
            <span class="hljs-string">"grade"</span>:<span class="hljs-string">"grade1"</span>,
            <span class="hljs-string">"email"</span>:<span class="hljs-string">"email1"</span>,
            <span class="hljs-string">"firstName"</span>:<span class="hljs-string">"firstName1"</span>,
            <span class="hljs-string">"lastName"</span>:<span class="hljs-string">"lastName1"</span>,
            <span class="hljs-string">"birthDate"</span>:<span class="hljs-string">"birthDate1"</span>,
            <span class="hljs-string">"country"</span>:<span class="hljs-string">"country1"</span>,
            <span class="hljs-string">"city"</span>:<span class="hljs-string">"city1"</span>
        }
        ...

    ],
    <span class="hljs-string">"currentPage"</span>:<span class="hljs-number">1</span>,
    <span class="hljs-string">"totalCount"</span>:<span class="hljs-number">30</span>
}</code></pre></div><h3 id="actionbar-配置的例子">ActionBar 配置的例子</h3><div class="highlight"><pre><code class="javascript">
<span class="hljs-comment">// 当启用useListActionBar时，actionBar上的所有功能将在`actionBar`内配置完成</span>
actionBar: {
    className: <span class="hljs-string">'my-list-action-bar'</span>,
    <span class="hljs-comment">// 是否显示行全选</span>
    showSelectAll: <span class="hljs-literal">true</span>,
    <span class="hljs-comment">// 按钮配置</span>
    buttons: [
      {
        title: <span class="hljs-string">'Action Button'</span>,
        render() {
          <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">{'primary'}</span>&gt;</span>切换子表格状态<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
          )</span>
        },
        keepActiveInCustomView: <span class="hljs-literal">false</span>,
        callback: () =&gt; {
          <span class="hljs-keyword">this</span>.forceUpdate();
          <span class="hljs-built_in">console</span>.log(me.table.getData());
          me.table.toggleSubComp(me.table.getData().data.datas);
        },
      },
      {
        title: <span class="hljs-string">'按钮'</span>,
        keepActiveInCustomView: <span class="hljs-literal">false</span>,
        <span class="hljs-comment">// size: 'large',</span>
        type: <span class="hljs-string">'primary'</span>,
        <span class="hljs-comment">// className: 'xxxxx',</span>
        callback: () =&gt; {
          me.table.selectAll(<span class="hljs-literal">true</span>);
        }
      }
    ],
    <span class="hljs-comment">// 文案提示，支持function</span>
    actionBarTip: <span class="hljs-string">'已经为您找到记录123条'</span>,
    <span class="hljs-comment">// 自定义内容</span>
    customBarItem: {
      render() {
        <span class="hljs-keyword">return</span> (
          <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{color:</span> '<span class="hljs-attribute">red</span>'}} <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{(e)</span> =&gt;</span> {console.log(e)}}&gt;自定义内容<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
        )</span>
      }
    },
    <span class="hljs-comment">// 行排序</span>
    rowOrder: {
      iconName: <span class="hljs-string">'paixu-jiangxu'</span>,
      <span class="hljs-comment">// keepActiveInCustomView: true,</span>
      defaultValue: {
        text: <span class="hljs-string">'排序方式一'</span>,
        value: <span class="hljs-string">'123'</span>
      },
      items: [
        {
          text: <span class="hljs-string">'排序方式一'</span>,
          value: <span class="hljs-string">'123'</span>
        },
        {
          text: <span class="hljs-string">'排序方式二'</span>,
          value: <span class="hljs-string">'456'</span>
        }
      ],
      onChange(data) {
        <span class="hljs-built_in">console</span>.log(data)
      }
    },
    <span class="hljs-comment">// 列排序</span>
    columnsOrder: {
      iconName: <span class="hljs-string">'huxiangguanzhu'</span>,
      <span class="hljs-comment">// keepActiveInCustomView: true,</span>
      title: <span class="hljs-string">'列排序'</span>,
      includeActionColumn: <span class="hljs-literal">false</span>,  <span class="hljs-comment">// 优先级低于fixed和rightFixed</span>
      onChange(dragInfo, data) {
        <span class="hljs-built_in">console</span>.log(data)
      }
    },
    <span class="hljs-comment">// 列选择</span>
    columnsPicker: {
      iconName: <span class="hljs-string">'zidingyilie'</span>,
      title: <span class="hljs-string">'自定义列'</span>,
      keepActiveInCustomView: <span class="hljs-literal">true</span>,
      onChange(data) {
        <span class="hljs-built_in">console</span>.log(data)
      }
    },
    <span class="hljs-comment">// 自定义视图，支持返回promise和component</span>
    customView: {
      render(data, currentPage) {
        <span class="hljs-built_in">console</span>.log(data, currentPage);
        <span class="hljs-comment">// return (</span>
        <span class="hljs-comment">//   &lt;Test name={'自定义的View'}/&gt;</span>
        <span class="hljs-comment">// )</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve</span>) </span>{
          setTimeout(() =&gt; {
            resolve(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Test</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">{'自定义的View'}</span>/&gt;</span>)</span>
          })
        })
      }
    },
    <span class="hljs-comment">// 是否显示迷你翻页器</span>
    showMiniPager: <span class="hljs-literal">true</span>,
    <span class="hljs-comment">// 搜索框</span>
    search: {
      <span class="hljs-comment">// placeholder: '请输入搜索关键字',</span>
      onSearch() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-number">234234</span>)
      }
    },
    <span class="hljs-comment">// 在自定义视图下移出翻页器</span>
    removePagerInCustomView: <span class="hljs-literal">true</span>,
    <span class="hljs-comment">// 超链接</span>
    linkBar: [
      {
        title: <span class="hljs-string">'修改columns'</span>,
        callback: () =&gt; {
          <span class="hljs-keyword">this</span>.setState({
            columns: <span class="hljs-keyword">this</span>.state.columns.filter(item =&gt; {
              <span class="hljs-keyword">return</span> item.title === <span class="hljs-string">'LastName'</span>
                || item.title === <span class="hljs-string">'Email'</span>
                || item.title === <span class="hljs-string">'操作1'</span>
            })
          })
        },
      },
      {
        title: <span class="hljs-string">'操作外链二'</span>,
        callback: () =&gt; {
          alert(<span class="hljs-number">2</span>);
        },
      },
    ],
}

----------以下为<span class="hljs-number">10.5</span><span class="hljs-number">.0</span>之前的actionBar配置，不推荐使用----------

<span class="hljs-comment">// actionBar 支持传入一个对象</span>
actionBar: {
    <span class="hljs-string">"新增行"</span>: () =&gt; { <span class="hljs-comment">// 点击回调</span>
        me.refs.grid.addEmptyRow();
    },
    <span class="hljs-string">"编辑所有行"</span>: () =&gt; {
        me.refs.grid.editAllRow();
    }
}

<span class="hljs-comment">// 或者定制能力更加强大的数组</span>
actionBar: [
    {
        title: <span class="hljs-string">'新增行'</span>, <span class="hljs-comment">// 显示名称</span>
        callback: () =&gt; { <span class="hljs-comment">// 点击回调</span>
            me.refs.grid.addEmptyRow();
        },
        render: (title) =&gt; { <span class="hljs-comment">// 定制渲染</span>
            <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span>&gt;</span>{title}<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>
        }
    },
    {
        title: "编辑所有行",
        callback: () =&gt; {
            me.refs.grid.editAllRow();
        }
    },
    {
        title: "保存所有行",
        callback: () =&gt; {
            me.refs.grid.saveAllRow();
        }
    }

]
</span></code></pre></div><h3 id="actions-配置的例子">actions 配置的例子</h3><div class="highlight"><pre><code class="javascript">[
  {
    title: <span class="hljs-string">'编辑'</span>, <span class="hljs-comment">// 操作名称</span>
    callback: (rowData) =&gt; { <span class="hljs-comment">// 操作回调</span>
      me.refs.grid.editRow(rowData);
    },
    mode: Constants.MODE.VIEW, <span class="hljs-comment">// 非必要参数，只在何种模式下显示</span>
  },
  {
    title: <span class="hljs-string">'保存'</span>,
    callback: (rowData) =&gt; {
      me.refs.grid.saveRow(rowData);
    },
    mode: Constants.MODE.EDIT,
    render: (title, rowData) =&gt;  <span class="hljs-comment">// 定制渲染</span>
             <span class="hljs-string">`<span class="hljs-subst">${title}</span>1`</span>,
  },
];</code></pre></div><h3 id="对于多行的支持">对于多行的支持</h3><blockquote>
<p>正常情况下，Table 中每个单元格按照一行缩略的方式展示，根据业务需要，有时可能需要展示多行，对此，Table 通过 prop <code>addRowClassName</code> 配合专属类名 <code>multiline</code> 来实现。示例如下：</p>
</blockquote>
<pre>addRowClassName: function(rowData) {
    return &#39;multiline&#39;;
}</pre><blockquote>
<p>需要注意：当配置为 multiline 时，用户需自己处理上下间距的问题，处理的方式应为在 multiline 或其他专属类名作用域下进行设置，避免影响其他非 multiline 设置的行。</p>
</blockquote>
</div></article></div><div id="site-footer" class="site-footer"><div class="footer-right">© 2019 Alibaba, Inc.</div><div class="footer-power"><span>CREATED BY</span><img src="https://img.alicdn.com/tps/TB1YdwBPXXXXXbPXFXXXXXXXXXX-336-102.png"><span>阿里巴巴企业智能事业部用户体验</span></div></div><script src="http://s95.cnzz.com/z_stat.php?id=1259450590&amp;web_id=1259450590" language="JavaScript"></script></body></html>